vue transition动画

引用： https://www.cnblogs.com/ccyinghua/p/7872694.html
https://blog.csdn.net/wxw20147854/article/details/82835748

官网API: https://cn.vuejs.org/v2/guide/transitions.html

demo点击显示与消失

<div id="demo"><button v-on:click="show = !show">Toggle</button><transition name="fade"><p v-if="show">hello</p></transition>
</div>
<script>
new Vue({el: '#demo',data: {show: true}
})
</script>
<style>
.fade-enter-active, .fade-leave-active {transition: opacity .5s
}
.fade-enter, .fade-leave-active {opacity: 0
}
</style>

一、transition使用

<transition name="fade">运动东西(元素，属性、路由....)
</transition>

class定义：

.fade-enter{ } 进入过渡的开始状态，元素被插入时生效，只应用一帧后立即删除；(运动的初始状态)

.fade-enter-active{ } 进入过渡的结束状态，元素被插入时就生效，在 transition/animation 完成之后移除。这个类可以被用来定义过渡的过程时间，延迟和曲线函数。

.fade-leave{ } 离开过渡的开始状态，元素被删除时触发，只应用一帧后立即删除；

.fade-leave-active{ } 离开过渡的结束状态，元素被删除时生效，在 transition/animation 完成之后移除。这个类可以被用来定义过渡的过程时间，延迟和曲线函数。

四、transition结合animate.css使用。

<transition enter-active-class="zoomInLeft" leave-active-class="zoomOutRight"><p v-show="show" class="animated"></p>
</transition>
或者
<transition enter-active-class="animated zoomInLeft" leave-active-class="animated zoomOutRight"><p v-show="show"></p>
</transition>

五、多个元素运动

<!-- key一般是循环遍历出来的 -->
<transition-group enter-active-class="zoomInLeft" leave-active-class="zoomOutRight"><p v-show="show" :key=""></p><p v-show="show" :key=""></p>
</transition-group>

转载于:https://www.cnblogs.com/llllpzyy/p/10647326.html