1. 使用过渡类名实现动画
v-enter: 进入之前元素的起始状态，还没有进入v-enter-to: 定义进入过渡的结束状态v-enter-active:定义进入过渡生效时的状态v-leave:定义离开过渡的开始状态v-leave-to: 动画离开之后，离开的终止状态，此时元素动画已结束v-leave-enter: 定义离开过渡生效时的状态<div id="app"><input type="button" value="toggle" @click="flag=!flag"><!-- 使用Vue官方提供的transition元素，将需要被动画控制的元素包裹起来 --><transition name="fade"> <h3 v-if="flag">哈哈哈</h3></transition></div><script>var vm =new Vue ({el: '#app',data: {flag: false},methods: {}})</script>
同时，在head部分定义样式
<!-- 自定义两组样式，来控制transition内部的元素实现动画 --><style>.fade-enter,.fade-leave-to {opacity: 0;}/* fade-enter-active: 入场动画的时间段fade-leave-active： 离场动画的时间段 */.fade-enter-active,.fade-leave-active {transition: all 2s ease;}</style>
注： 若transition未加name属性，则过渡的类名均以 v- 开头，且定义的样式多个 transition可以共用
2.使用第三方animate.css类库
自定义过渡的类名：
enter-classenter-active-classenter-to-classleave-classleave-active-classleave-to-class<link rel="stylesheet" href="animate.css"> //引入animate.css
<div id="app2"><input type="button" value="toggle" @click="flag=!flag"><transition enter-active-class="animated bounceIn" leave-active-class="animated bounceOut">// 注：要加animated<h3 v-if="flag">哈哈哈</h3></transition></div>
3. JS钩子函数 （可实现半场动画，上面两种方法都无法实现）
<transition// 入场动画v-on:before-enter="beforeEnter"v-on:enter="enter"v-on:after-enter="afterEnter"v-on:enter-cancelled="enterCancelled"// 离场动画v-on:before-leave="beforeLeave"v-on:leave="leave"v-on:after-leave="afterLeave"v-on:leave-cancelled="leaveCancelled"></transition>
例子：实现小球半场动画
<div id="app"><input type="button" value="跳跳糖" @click="flag=!flag"><transition @before-enter="beforeEnter"@enter="enter"@after-enter="afterEnter"><div class="ball" v-show="flag"></div></transition></div><script>var vm = new Vue({el: '#app',data: {flag: false},methods: {// 注意：动画钩子函数的第一个参数：el，表示要执行动画的那个DOM元素，是个原生的 JS DOM对象beforeEnter(el) {// 动画入场之前，此时动画尚未开始，可以在beforeEnter中设置元素开始之前的起始样式el.style.transform = "translate(0,0)" // 设置小球开始动画之前的起始位置},enter(el, done) {el.offsetWidth // 这句话无实际作用，但若不写则出不来动画效果 offsetHeight offsetTop offsetLeft都可以// 动画开始之后的样式，在这里可以设置小球完成动画之后的结束状态el.style.transform = "translate(150px, 450px)"el.style.transition = 'all 1s ease'done() // 这里的 done 其实就是afterEnter函数的引用，不可缺少},afterEnter(el) {// 动画完成之后，会调用this.flag = !this.flag}}})</script>
4. 采用transition-group实现列表动画
例子
<div id="app"><div><label>Id:<input type="text" v-model="id"></label><label>Name:<input type="text" v-model="name"></label><input type="button" value="添加" @click= "add()"></div><ul><!-- 在实现列表过渡的时候，如果需要过渡的元素是通过 v-for 循环渲染出来的，不能使用 transition 包裹，需要使用 transitionGroup --><!-- 如果要为 v-for 循环创建的元素设置动画，必须为每一个元素设置 :key 属性 --><transition-group><li v-for="(item,i) in list" :key="item.id" @click="del(i)">{{item.id}} --{{item.name}} </li></transition-group></ul></div>
<script>var vm = new Vue({el: '#app',data: {id:'',name:'',list: [{id:1, name:'小明'},{id:2, name:'小红'},{id:3, name:'小黄'}]},methods: {add() {this.list.push({id: this.id, name: this.name})this.id = this.name = ''},del(i) {this.list.splice(i,1)}}})</script>
<style>li {border: 1px dashed #999;margin: 5px;line-height: 35px;padding-left: 5px;font-size: 12px;}.v-enter,.v-leave-to {opacity: 0;transform: translateY(80px);}.v-enter-active,.v-leave-active {transition: all 1s ease;}/* 下面的 .v-move 和.v-leave-active 配合使用，能够实现列表后续的元素渐渐的飘上来的效果 */.v-move {transition: all 1s ease;}.v-leave-active {position: absolute;}</style>
注：
给transition-group 添加apper 属性，可实现页面入场时候的效果<ul><transition-group appear><li v-for="(item,i) in list" :key="item.id" @click="del(i)">{{item.id}} --{{item.name}} </li></transition-group></ul>
transition-group 会被默认渲染为span元素，可通过设置 tag 属性，使transition-group 渲染为指定的元素
<!-- <ul> --><transition-group appear tag="ul"><li v-for="(item,i) in list" :key="item.id" @click="del(i)">{{item.id}} --{{item.name}} </li></transition-group><!-- </ul> -->
