标签：border vue width click doc strong str cli back
相对于vue1.0来说，vue2.0的动画变化还是挺大的，在1.0中，直接在元素中加 transition ，后面跟上名字。而在vue2.0中，需要把设置动画的元素、路由放在<transition name="fade"></transition>中，name就是动画名称。
在1.0时，css需要设置（动画名称以fade为例）.fade-transition .fade-enter .fade-leave ，具体用法看： http://www.cnblogs.com/sunsanfeng/p/animate.html
在2.0时，css设置大改，.fade-enter{} 元素初始状态 .fade-enter-active{} 元素最终状态 .fade-leave-active{} 元素离开的最终状态
vue1.0动画源码：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8" /> 5 <title>孙三峰--博客园</title> 6 <script type="text/javascript" src="js/vue.js" ></script> 7 <style> 8 .oDiv{ 9 width: 200px; 10 height: 200px; 11 border: 3px dashed red; 12 background: coral; 13 } 14 .fade-transition{ 15 transition: 2s all ease; 16 } 17 .fade-enter{ 18 opacity: 0; 19 } 20 .fade-leave{ 21 opacity: 0; 22 transform: translate(200px); 23 } 24 </style> 25 </head> 26 <body> 27 <div id="box"> 28 <input type="button" value="button" @click="toggle()" /> 29 <div class="oDiv" v-show="Dist" transition="fade">{{Dist}}</div> 30 </div> 31 </body> 32 <script type="text/javascript"> 33 new Vue({ 34 el:‘#box‘, 35 data:{ 36 Dist:false 37 }, 38 methods:{ 39 toggle:function(){ 40 this.Dist=!this.Dist; 41 } 42 } 43 }) 44 </script> 45 </html>
vue2.0动画源码：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8" /> 5 <title>孙三峰--博客园</title> 7 <script type="text/javascript" src="js/vue2.0.3.js" ></script> 9 <style> 10 p{ 11 width: 300px; 12 height: 300px; 13 background-color: yellow; 14 } 15 .donghua-enter-active,.donghua-leave-active{ 16 transition: 5s all ease; 17 } 18 .donghua-enter-active{ 19 opacity: 1; 20 width: 300px; 21 height: 300px; 22 } 23 .donghua-leave-active{ 24 opacity: 0; 25 widows: 100px; 26 height: 100px; 27 } 28 .donghua-enter{ 29 opacity: 0; 30 width: 100px; 31 height: 100px; 32 } 33 </style> 34 <script src="vue.js"></script> 35 <script> 36 window.onload=function(){ 37 new Vue({ 38 el:‘#box‘, 39 data:{ 40 show:false 41 } 42 }); 43 }; 44 </script> 45 </head> 46 <body> 47 <div id="box"> 48 <input type="button" value="点击显示隐藏" @click="show=!show"> 49 <transition name="donghua"> 50 <p v-show="show"></p> 51 </transition> 52 </div> 53 </body> 54 </html>
标签：border vue width click doc strong str cli back
原文地址：http://www.cnblogs.com/sunsanfeng/p/transition.html
