1. 单元素/组件的过渡
Vue 提供了 transition 的封装组件，在下列情形中，可以给任何元素和组件添加进入/离开过渡
- 条件渲染 (使用
v-if) - 条件展示 (使用
v-show) - 动态组件
- 组件根节点
实例：
<style> ???.fade-enter,.fade-leave-to{ ???????opacity: 0; ???} ???.fade-enter-active,.fade-leave-active{ ???????transition: opacity .5s; ???}</style><!-- fade是自定义的名称，会被当成类的前缀 "fade-enter" ?-->
<div id="app"> ???<transition name="fade"> ??????????????????????????????<div v-if="show"><h1>show</h1></div> ???</transition> ???<button @click="handleChange">change</button></div>
<script> ???new Vue({ ???????el: ‘#app‘, ???????data:{ ???????????show: true ???????}, ???????methods:{ ???????????handleChange:function(){ ???????????????this.show = !this.show; ???????????} ???????} ???})</script>2. 过渡的类名
在进入/离开的过渡中，会有 6 个 class 切换：v-enter 、v-enter-active、v-enter-to、v-leave、v-leave-active、v-leave-to
关于过渡类名：
如果你使用一个没有名字的 <transition>，则 v-是这些类名的默认前缀。
如果你使用了 <transition name="my-transition">，那么 v-enter 会替换为 my-transition-enter
3. 关于动画 （此处省略）
4. vue中使用第三方animate.css 库
首先link引入animate.css，然后结合自定义过渡的类名 enter-active-class、leave-active-class，
animated是必须要写的，hinge shake是引入的动画效果
<div id="app"> ???<transition enter-active-class="animated hinge" leave-active-class="animated shake"> ???????<div v-if="show">show</div> ???</transition> ???<button @click="handleChange">change</button></div>
<script> ???new Vue({ ???????el: ‘#app‘, ???????data:{ ???????????show: true ???????}, ???????methods:{ ???????????handleChange:function(){ ???????????????this.show = !this.show; ???????????} ???????} ???})</script>Vue——关于css过渡和动画那些事
原文地址：https://www.cnblogs.com/ly2646/p/9469551.html