vue 動畫 —— 滾動動畫

要點

滾動動畫包含兩種變化：

（1）位置變化

transform: translate(-100%);      

（2）沿z軸（垂直于螢幕方向）旋轉 

transform: rotate3d(0, 0, 1, -360deg);      

完整範例代碼

<template>
    <div>
        <button @click="show = true">點我滾入</button>
        <button @click="show = false">點我滾出</button>
        <transition
                enter-active-class="rollIn"
                leave-active-class="rollOut"
        >
            <div v-show="show" class="circle200">滾動動畫</div>
        </transition>
    </div>
</template>
<script>
    export default {
        data() {
            return {
                show: false
            }
        },
    }
</script>
<style scoped>
    .circle200 {
        height: 200px;
        width: 200px;
        background: red;
        border-radius: 50%;
        text-align: center;
        line-height: 200px;
    }

    /*滾入——從左側*/
    @keyframes rollIn {
        0% {
            opacity: 0;
            transform: translate(-100%) rotate3d(0, 0, 1, -360deg);
        }
        100% {
            opacity: 1;
        }
    }

    /*滾出——從左側*/
    @keyframes rollOut {
        0% {
            opacity: 1;
        }
        100% {
            opacity: 0;
            transform: translate(-100%) rotate3d(0, 0, 1, -360deg);
        }
    }

    /*滾入——從左側*/
    .rollIn {
        animation: rollIn 1s;
    }

    /*滾出——從左側*/
    .rollOut {
        animation: rollOut 1s;
    }
</style>