Skip to content
On this page

Flip 翻牌

基础翻牌

展开查看
vue
<template>
    <div class="biz-flip">
        <div class="flip">
            <div class="digital front" >
                <div class="before" data-number="0"></div>
                <div class="after" data-number="0"></div>
            </div>
            <div class="digital back" >
                <div class="before" data-number="1"></div>
                <div class="after" data-number="1"></div>
            </div>
        </div>
    </div>
    <div class="biz-flip">
        <!-- 有动画,添加类名“go” -->
        <div class="flip go">
            <div class="digital front" >
                <div class="before" data-number="0"></div>
                <div class="after" data-number="0"></div>
            </div>
            <div class="digital back" >
                <div class="before" data-number="1"></div>
                <div class="after" data-number="1"></div>
            </div>
        </div>
    </div>
</template>