1 在 vue 中，使用 <transition> 标签包含着的单个子元素在使用 v-show 或 v-if 切换显示隐藏前，会先判断是否有对应的 class 样式能匹配到该子元素上：
<script src="https://www.jb51.net/public/javascripts/vuejs"></script> <style> red {background-color: red; width: 100px; height: 100px;} redv-leave { margin-top: 50px; } redv-leave-active { transition: all 3s;} redv-leave-to { margin-top: 100px; opacity: 0;} redv-enter { margin-top: 50px; } redv-enter-active { transition: all 3s;} redv-enter-to { margin-top: 10px; opacity: 0;} </style> <body> <div> <transition> <div v-show="show"></div> </transition> <button v-on:click="change">button</button> </div> <script> new Vue({ el: '#app', data: { show: true }, methods: { change: function(){ thisshow = !thisshow; } } }); </script> </script> </body>
v-leave 当前元素准备从显示转变成隐藏，在动画开始前添加到元素上，动画一旦开始会立即删除；
v-leave-active 在动画过渡过程中，元素一直拥有该样式，直到动画结束则自动删除，用于设置过渡的效果；
v-leave-to 在动画过渡过程中，元素一直拥有该样式，直到动画结束则自动删除，用于设置动画最终的效果；
事例中，当点击 button，div 并不会马上 display: none， 而是首先设置 v-leave ，下一刻即删除 v-leave ，同时添加 v-leave-active v-leave-to，当 v-leave-active 中的过渡时间执行完成，则删除 v-leave-active v-leave-to，同时添加 display: none。
v-enter 当前元素准备从隐藏转变成显示，在动画开始前添加到元素上，动画一旦开始会立即删除；
v-enter-active 在动画过渡过程中，元素一直拥有该样式，直到动画结束则自动删除，用于设置过渡的效果；
v-enter-to 在动画过渡过程中，元素一直拥有该样式，直到动画结束则自动删除，用于设置动画最终的效果；
事例中，当点击 button，div 马上清除 display: none， 然后设置 v-enter ，下一刻即删除 v-enter ，同时添加 v-enter-active v-enter-to，当 v-enter-active 中的过渡时间执行完成，则删除 v-enter-active v-enter-to。
2 自定义动画类名：
<script src="https://www.jb51.net/public/javascripts/vuejs"></script> <style> red {background-color: red; width: 100px; height: 100px;} redslide-leave { margin-top: 50px; } redslide-leave-active { transition: all 3s;} redslide-leave-to { margin-top: 100px; opacity: 0;} redslide-enter { margin-top: 50px; } redslide-enter-active { transition: all 3s;} redslide-enter-to { margin-top: 10px; opacity: 0;} </style> <body> <div> <transition> <div v-show="show"></div> </transition> <button v-on:click="change">button</button> </div> <script> new Vue({ el: '#app', data: { show: true }, methods: { change: function(){ thisshow = !thisshow; } } }); </script>
该效果与上一例效果完全一致的，transition 元素可以使用 name 属性来指定使用的类名前缀，从而代替 v-字段，例如事例中的 使本来的 v-enter 变成了 slide-enter。
3 transition 与 animation 同时使用时
<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;} blue {background-color: blue; width: 100px; height: 100px;} v-leave { margin-top: 50px; } v-leave-active { transition: all 3s; animation: aslide 5s;} v-leave-to { margin-top: 100px;} </style> <body> <div> <transition type="transition" > <div v-show="show"></div> </transition> <br> <transition type="animation" > <div v-show="show"></div> </transition> <button v-on:click="change">button</button> </div> <script> new Vue({ el: '#app', data: { show: true }, methods: { change: function(){ thisshow = !thisshow; } } }); </script>
事例中，动画同时指定了 transition 和 animation 动画， transition 元素的 type 属性可以指定以哪种动画的时间为元素的结束时间，如果不指定动画监控的方式，则会以最长时间的为准。
4 javascript 监听动画
<script src="https://www.jb51.net/public/javascripts/vuejs"></script> <style> red {background-color: red; width: 100px; height: 100px;} v-leave { margin-top: 50px; } v-leave-active { transition: all 3s;} v-leave-to { margin-top: 100px;} </style> <body> <div> <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" > <div v-show="show"></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---------'); }, beforeEnter: function (el) { consolelog('beforeEnter:'); }, enter: function (el, done) { consolelog('enter:'); // done() }, afterEnter: function (el) { consolelog('afterEnter:'); }, enterCancelled: function (el) { consolelog('enterCancelled:'); }, beforeLeave: function (el) { consolelog('beforeLeave:'); }, leave: function (el, done) { consolelog('leave:'); done() }, afterLeave: function (el) { consolelog('afterLeave:'); }, leaveCancelled: function (el) { consolelog('leaveCancelled:'); } } }); </script>
