一旦使用 js 事件，原 css 动画过渡效果就会无效，官方推荐在 <div v-show="show"></div> 上设置 v-bind:css="false" 可令 vue 内部机制免去监测 css 动画事件回调，提高性能。
enter 和 leave 事件需手动调用 done 方法，不然事件一直不会调用后续的 after 事件，没有调用 after 事件但是又有其他事件开始了，则被视为动画被 cancel 了。
5 页面初始化时的动画：
<script src="https://www.jb51.net/public/javascripts/vuejs"></script> <style> @keyframes aslide { 0% { margin-left: 10px; } 100% { margin-left: 100px; } } red {background-color: red; width: 100px; height: 100px;} apper { margin-top: 50px; } apper-active { margin-top: 100px; animation: aslide 4s; transition: all 3s;} </style> <body> <div> <transition appear appear-class="apper" appear-active-class="apper-active" v-on:before-appear="customBeforeAppearHook" v-on:appear="customAppearHook" v-on:after-appear="customAfterAppearHook" > <div ></div> </transition> <button v-on:click="change">button</button> </div> <script> new Vue({ el: '#app', data: { show: true }, methods: { change: function() { thisshow = !thisshow; consolelog('-----------click---------'); }, customBeforeAppearHook: function (el) { consolelog('customBeforeAppearHook:'); }, customAppearHook: function (el) { consolelog('customAppearHook:'); // done() }, customAfterAppearHook: function (el) { consolelog('customAfterAppearHook:'); } } }); </script>
appear 属性表示开启初始化动画，appear-class 属性指定初始化前的样式，appear-active-class 属性指定初始化动画过程的样式；
transition 动画无法在初始化动画中起效，而 animation 动画则可以；
before-appear appear after-appear 是事件回调，看事例相当清晰。
6 动画元素的 key ：
<script src="https://www.jb51.net/public/javascripts/vuejs"></script> <style> v-enter-active { transition: all 15s;} v-enter-to { margin-top: 100px;} v-leave-active { transition: all 15s;} v-leave-to { margin-top: 10px;} </style> <body> <div> <div> <transition> <button v-if="show1" @click="show1 = false">on</button> <button v-else @click="show1 = true">off</button> </transition> </div> <div> <transition> <button v-if="show2" key="on" @click="show2 = false">on</button> <button v-else key="off" @click="show2 = true">off</button> </transition> </div> </div> <script> var app = new Vue({ el: '#app', data: { show1: true, show2: true } }); </script>
show1 为什么没有动画效果呢？因为 vue 会把切换中的两个 button 识别成同一个元素，只是修改了 button 中的不同内容，所以实际上页面并没有发生 DOM 元素的切换；
如果要让 vue 明确识别出这是2个不同的 button 元素，则为每个元素指定不同的 key 属性的值。
7 元素切换的动画模式：