vue中过渡动画分为两类,一类是进场动画,一类是出场动画要实现上面的进场动画,主要有三种方式:类名,css动画库,js函数
类名 本质就是动态添加类名实现动画
在进入/离开的过渡中,会有 6 个 class 切换。v-enter:定义进入过渡的开始状态。在元素被插入之前生效,在元素被插入之后的下一帧移除。
v-enter-active:定义进入过渡生效时的状态。在整个进入过渡的阶段中应用,在元素被插入之前生效,在过渡/动画完成之后移除。这个类可以被用来定义进入过渡的过程时间,延迟和曲线函数。
v-enter-to: 2.1.8版及以上 定义进入过渡的结束状态。在元素被插入之后下一帧生效 (与此同时 v-enter 被移除),在过渡/动画完成之后移除。
v-leave: 定义离开过渡的开始状态。在离开过渡被触发时立刻生效,下一帧被移除。
v-leave-active:定义离开过渡生效时的状态。在整个离开过渡的阶段中应用,在离开过渡被触发时立刻生效,在过渡/动画完成之后移除。这个类可以被用来定义离开过渡的过程时间,延迟和曲线函数。
v-leave-to: 2.1.8版及以上 定义离开过渡的结束状态。在离开过渡被触发之后下一帧生效 (与此同时 v-leave 被删除),在过渡/动画完成之后移除。
思路:
找到需要添加过渡动画的元素,用一个transition标签包裹起来,并给它指定一个name属性,这个name属性将来会替换掉类名的v-前缀定义上面6个类名里面的类容,注意类名v-前缀要换成name的值,关键要分清楚开始和结束的状态样式<style>.move-enter {padding-left: 100px;}.move-enter-active {transition: all 6s;}.move-enter-to {padding-left: 0;}.move-leave {padding-left: 0;}.move-leave-active {transition: all 6s;}.move-leave-to {padding-left: 100px;}</style><body><div id="app"><transition name="move"><div v-if="isShow">显示</div></transition><button @click="isShow = !isShow">切换</button></div><script>var vm = new Vue({el: '#app',data: {isShow: false}})</script></body>
注意点:
在标签同名的情况下,vue为了提高效率,会直接替换掉标签中的内容。为了解决这个问题,给每个标签加一个key属性,但这个key必须不一样当transition下面有两个标签要切换的时候,会出现同时在动的情况,解决方式给transition加一个mode属性如果想要动画一进来就有,那么就给transition加要给appear属性<transition name="move" mode="out-in" appear><div v-if="isShow" key="one">显示</div><div v-else key="two">隐藏</div></transition><button @click="isShow = !isShow">切换</button>