12.2使用animate.css

使用过度类名，实现动画

第一步是将需要动画的元素包裹在transition元素中，transition元素时Vue官方提供的

第二步自定义两组样式

v-enter和v-leave-to
v-enter-active和v-leave-active

第一组动画是两个时间点，分别是进入之前和退出之后的时间点，也就是在这两个时间点的期间，以什么样的样式显示

第二组动画是两个时间段，也就是入场动画和出场动画的时间段，也就是这个地方选择动画的元素，选择动画作用的事件，选择作用的样式

/*<!--    v-enter，是一个时间点，是进入之前，元素的起始状态，此时还没开始进入-->*/
/*v-leave-to，也是一个时间点是动画离开之后，离开的 终止状
态，此时元素动画已经结束了*/
 /*  v-enter-active是入场动画的时间 段 ，  */
        /*  v-leave-active是出场动画的时间 段 ，  */

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../../js/vue.js"></script>
    <style>
        .v-enter,
        .v-leave-to{
            opacity: 0;
        }
        .v-enter-active,
        .v-leave-active{
            transition: all 0.4s ease-in;
        }
    </style>
</head>
<body>
<div id="app">
    <input type="button" value="帅" @click="flag=!flag">
<transition>
    <h3 v-if="flag">看我帅不帅</h3>
</transition>
</div>
<script>
    var vm=new Vue({
        el:'#app',
        data:{
            flag:false
        },
    })
</script>
</body>
</html>

transform: translateX(150px);
是动画的位移

transition要求必须带v做前缀

但是也可以改变

.my-enter,
.my-leave-to{
    opacity: 0;
    transform: translateX(150px);
}
.my-enter-active,
.my-leave-active{
    transition: all 0.4s ease-in;
}

使用过度类名，实现动画

transition要求必须带v做前缀

猜你喜欢