使用transition標簽
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title> css動畫原理 </title> </meta> <script src="./vue.js" type="text/javascript"> </script> <style> .fade-enter, .fade-leave-to{ opacity: 0; } .fade-enter-active, .fade-leave-active{ transition: opacity 1s; } </style> </head> <body> <div id="app"> <transition name='fade'> <div v-show="show"> content </div> </transition> <button @click="handleClick"> 切換 </button> </div> <script> var app=new Vue({ el:"#app", data:{ show:true }, methods:{ handleClick:function(event){ this.show=!this.show; // event.preventDefault();//阻止了，但是由於點擊事件位置的變化，所以效果未成功。 } }, mounted:function(){ document.onselectstart = function(){return false;}; } }) </script> </body> </html>
使用keyframes
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title> css動畫原理keyframes </title> </meta> <script src="./vue.js" type="text/javascript"> </script> <style> @keyframes bounce-in{ 0%{ transform: scale(0); } 50%{ transform: scale(1.5); } 100%{ transform: scale(1); } } .in{ transform-origin: left center; animation: bounce-in 1s; } .out{ transform-origin: left center; animation: bounce-in 1s reverse; } </style> </head> <body> <div id="app"> <transition enter-active-class='in' leave-active-class='out'> <div v-show="show"> content </div> </transition> <button @click="handleClick"> 切換 </button> </div> <script> var app=new Vue({ el:"#app", data:{ show:true }, methods:{ handleClick:function(event){ this.show=!this.show; // event.preventDefault();//阻止了，但是由於點擊事件位置的變化，所以效果未成功。 } }, mounted:function(){ document.onselectstart = function(){return false;}; } }) </script> </body> </html>
使用animate.css
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title> css動畫原理animate.css </title> </meta> <link rel="stylesheet" href="./animate.css"> <script src="./vue.js" type="text/javascript"> </script> </head> <body> <div id="app"> <transition enter-active-class="animated swing" leave-active-class="animated shake"> <div v-show="show"> content </div> </transition> <button @click="handleClick"> 切換 </button> </div> <script> var app=new Vue({ el:"#app", data:{ show:true }, methods:{ handleClick:function(event){ this.show=!this.show; // event.preventDefault();//阻止了，但是由於點擊事件位置的變化，所以效果未成功。 } }, mounted:function(){ document.onselectstart = function(){return false;}; } }) </script> </body> </html>
animat加過渡的一些問題
type="transition" //用於選擇動畫的持續時間是過渡的時間
:duration="10000" //自定義動畫時長
:duration="{enter:5000,leave:10000}" //動畫進入時長和離開時長
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title> css動畫原理animate.css第一次顯示和加過渡 </title> </meta> <link rel="stylesheet" href="./animate.css"> <script src="./vue.js" type="text/javascript"> </script> <style> .fade-enter, .fade-leave-to{ opacity: 0; } .fade-enter-active, .fade-leave-active{ transition: opacity 3s; } </style> </head> <body> <div id="app"> <transition name="fade" :duration="{enter:5000,leave:10000}" enter-active-class="animated swing fade-enter-active" leave-active-class="animated shake fade-leave-active" appear appear-active-class="animated swing"> <div v-show="show"> content </div> </transition> <button @click="handleClick"> 切換 </button> </div> <script> var app=new Vue({ el:"#app", data:{ show:true }, methods:{ handleClick:function(event){ this.show=!this.show; // event.preventDefault();//阻止了，但是由於點擊事件位置的變化，所以效果未成功。 } }, mounted:function(){ document.onselectstart = function(){return false;}; } }) </script> </body> </html>
js動畫
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title> js動畫與velocity.js </title> </meta> <link href="./animate.css" rel="stylesheet"> <script src="./vue.js" type="text/javascript"> </script> <script src="./velocity.min.js" type="text/javascript"></script> </link> </head> <body> <div id="app"> <transition @after-enter="handleAfterEnter" @before-enter="handleBeforeEnter" @enter="handleEnter" name="fade"> <div v-show="show"> content </div> </transition> <button @click="handleClick"> 切換 </button> </div> <script> var app=new Vue({ el:"#app", data:{ show:true }, methods:{ handleClick:function(event){ this.show=!this.show; // event.preventDefault();//阻止了，但是由於點擊事件位置的變化，所以效果未成功。 }, handleBeforeEnter:function(el){ el.style.color="red"; }, handleEnter:function(el,done){ setTimeout(()=>{ el.style.color="green"; },2000) setTimeout(()=>{ done(); },4000) }, handleAfterEnter:function(el,done){ el.style.color="black"; }, }, mounted:function(){ document.onselectstart = function(){return false;}; } }) </script> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title> js動畫與velocity.js </title> </meta> <link href="./animate.css" rel="stylesheet"> <script src="./vue.js" type="text/javascript"> </script> <script src="./velocity.min.js" type="text/javascript"></script> </link> </head> <body> <div id="app"> <transition @after-enter="handleAfterEnter" @before-enter="handleBeforeEnter" @enter="handleEnter" name="fade"> <div v-show="show"> content </div> </transition> <button @click="handleClick"> 切換 </button> </div> <script> var app=new Vue({ el:"#app", data:{ show:true }, methods:{ handleClick:function(event){ this.show=!this.show; // event.preventDefault();//阻止了，但是由於點擊事件位置的變化，所以效果未成功。 }, handleBeforeEnter:function(el){ el.style.opacity=0; }, handleEnter:function(el,done){ Velocity(el,{ opacity:1 },{ duration:1000, complete:done }) }, handleAfterEnter:function(el,done){ alert("end") }, }, mounted:function(){ document.onselectstart = function(){return false;}; } }) </script> </body> </html>
mode in-out out-in
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title> js動畫 元素 </title> </meta> <link href="./animate.css" rel="stylesheet"> <script src="./vue.js" type="text/javascript"> </script> <style> .fade-enter, .fade-leave-to{ opacity: 0; } .fade-enter-active, .fade-leave-active{ transition: opacity 3s; } </style> </link> </head> <body> <div id="app"> <transition name="fade" mode="out-in"> <div v-if="show" key="start"> start </div> <div v-else key="end"> end </div> </transition> <button @click="handleClick"> 切換 </button> </div> <script> var app=new Vue({ el:"#app", data:{ show:true }, methods:{ handleClick:function(event){ this.show=!this.show; // event.preventDefault();//阻止了，但是由於點擊事件位置的變化，所以效果未成功。 }, }, mounted:function(){ document.onselectstart = function(){return false;}; } }) </script> </body> </html>
組件中的動畫
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title> js動畫 組件 </title> </meta> <link href="./animate.css" rel="stylesheet"> <script src="./vue.js" type="text/javascript"> </script> <style> .fade-enter, .fade-leave-to{ opacity: 0; } .fade-enter-active, .fade-leave-active{ transition: opacity 3s; } </style> </link> </head> <body> <div id="app"> <transition mode="out-in" name="fade"> <component :is="type"></component> </transition> <button @click="handleClick"> 切換 </button> </div> <script> Vue.component("child-one",{ template:"<div>child-one</div>" }) Vue.component("child-two",{ template:"<div>child-two</div>" }) var app=new Vue({ el:"#app", data:{ type:"child-one" }, methods:{ handleClick:function(event){ this.type=this.type==='child-one'?"child-two":"child-one"; }, }, mounted:function(){ document.onselectstart = function(){return false;}; } }) </script> </body> </html>
列表過渡
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title> 列表過渡 </title> </meta> <link href="./animate.css" rel="stylesheet"> </link> <script src="./vue.js" type="text/javascript"> </script> <style> .v-enter, .v-leave-to{ opacity: 0; } .v-enter-active, .v-leave-active{ transition: opacity 3s; } </style> </head> <body> <div id="app"> <transition-group> <div :key="item.id" v-for="(item,index) of list"> {{item.title}} </div> </transition-group> <button @click="handleClick"> Add </button> </div> <script> var count=0; var app=new Vue({ el:"#app", data:{ list:[] }, methods:{ handleClick:function(event){ this.list.push({ id:count++, title:"content" }) }, }, mounted:function(){ document.onselectstart = function(){return false;}; } }) </script> </body> </html>
動畫封裝
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title> 動畫封裝 </title> </meta> <script src="./vue.js" type="text/javascript"> </script> </head> <body> <div id="app"> <fade v-show="show"> <div> content </div> </fade> <fade v-show="show"> <div> content </div> </fade> <button @click="handleClick"> 切換 </button> </div> <script> Vue.component("fade",{ props:["show"], template:` <transition @before-enter="handleBeforeEnter" @enter="handleEnter" @after-enter="handleAfterEnter"> <slot v-show="show"></slot> </transition> `, methods:{ handleBeforeEnter:function(el){ el.style.color="red"; }, handleEnter:function(el,done){ setTimeout(()=>{ el.style.color="green"; },2000) setTimeout(()=>{ done(); },4000) }, handleAfterEnter:function(el,done){ el.style.color="black"; }, } }) var app=new Vue({ el:"#app", data:{ show:false }, methods:{ handleClick:function(event){ this.show=!this.show; }, }, }) </script> </body> </html>
當然關於動畫的內容還有很多，其余更深入的部分可以觀看：https://cn.vuejs.org/v2/guide/transitioning-state.html