transition vue2.0动画
Posted 孙三峰
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了transition vue2.0动画相关的知识，希望对你有一定的参考价值。
相对于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{} 元素离开的最终状态
在2.0中，依然可以与animate.css结合起来一起写动画，具体用法请看第三块代码
在2.0中，关于动画还为我们提供了一些事件，在下面第四段代码块
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> 6 <script type="text/javascript" src="js/vue2.0.3.js" ></script> 7 <style> 8 p{ 9 width: 300px; 10 height: 300px; 11 background-color: yellow; 12 } 13 .donghua-enter-active,.donghua-leave-active{ 14 transition: 5s all ease; 15 } 16 .donghua-enter-active{ 17 opacity: 1; 18 width: 300px; 19 height: 300px; 20 } 21 .donghua-leave-active{ 22 opacity: 0; 23 widows: 100px; 24 height: 100px; 25 } 26 .donghua-enter,.donghua-leave{ 27 opacity: 0; 28 width: 100px; 29 height: 100px; 30 } 31 </style> 32 <script src="vue.js"></script> 33 <script> 34 window.onload=function(){ 35 new Vue({ 36 el:\'#box\', 37 data:{ 38 show:false 39 } 40 }); 41 }; 42 </script> 43 </head> 44 <body> 45 <div id="box"> 46 <input type="button" value="点击显示隐藏" @click="show=!show"> 47 <transition name="donghua"> 48 <p v-show="show"></p> 49 </transition> 50 </div> 51 </body> 52 </html>
vue2.0配合 animate.css
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>配合animate.css做动画</title> 6 <link rel="stylesheet" type="text/css" href="css/animate.css"/> 7 <script type="text/javascript" src="js/vue2.0.3.js" ></script> 8 <style> 9 p{ 10 width: 300px; 11 height: 300px; 12 background-color: yellow; 13 margin: 0 auto; 14 } 15 </style> 16 <script type="text/javascript"> 17 window.onload=function(){ 18 new Vue({ 19 el:\'#box\', 20 data:{ 21 show:false 22 } 23 }) 24 } 25 </script> 26 </head> 27 <body> 28 <div id="box"> 29 <input type="button" value="点击显示和隐藏" @click="show=!show" /> 30 <transition enter-active-class="zoomOutDown" leave-active-class="zoomOutUp"> 31 <p v-show="show" class="animated"></p> 32 </transition> 33 </div> 34 </body> 35 </html>
vue2.0中，内置的动画事件
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>动画事件</title> 6 <script type="text/javascript" src="js/vue2.0.3.js" ></script> 7 <style> 8 p{ 9 width: 300px; 10 height: 300px; 11 background-color: yellow; 12 } 13 .donghua-enter-active,.donghua-leave-active{ 14 transition: 5s all ease; 15 } 16 .donghua-enter-active{ 17 opacity: 1; 18 width: 300px; 19 height: 300px; 20 } 21 .donghua-leave-active{ 22 opacity: 0; 23 widows: 100px; 24 height: 100px; 25 } 26 .donghua-enter,.donghua-leave{ 27 opacity: 0; 28 width: 100px; 29 height: 100px; 30 } 31 </style> 32 <script> 33 window.onload=function(){ 34 new Vue({ 35 el:\'#box\', 36 data:{ 37 show:false 38 }, 39 methods:{ 40 beforeEnter(){ 41 console.log("<!-- 进入动画开始之前 -->"); 42 }, 43 Enter(){ 44 console.log("<!-- 正在进入动画-->"); 45 }, 46 afterEnter(el){ 47 console.log("<!-- 动画结束 -->"); 48 }, 49 beforeLeave(el){ 50 console.log("<!-- 离开动画开始之前 -->"); 51 el.style.background=\'blue\'; //改变颜色 52 el.innerHTML="123"; 53 }, 54 Leave(){ 55 console.log("<!-- 正在离开动画-->"); 56 }, 57 afterLeave(){ 58 console.log("<!-- 离开动画结束 -->"); 59 }, 60 } 61 }); 62 }; 63 </script> 64 </head> 65 <body> 66 <div id="box"> 67 <input type="button" value="点击显示隐藏" @click="show=!show"> 68 <transition name="donghua" 69 @before-enter="beforeEnter" 70 @enter="Enter" 71 @after-enter="afterEnter" 72 @before-leave="beforeLeave" 73 @leave="Leave" 74 @after-leave="afterLeave" 75 > 76 <p v-show="show"></p> 77 </transition> 78 </div> vue2.0学习之动画