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>