05.28 技術專欄-vue中的動畫

vue中的動畫主要依靠transition這個控件，關於transition這個api可以上官網查看vue中的transition

vue中使用css動畫

 
 <title>Vue中CSS動畫原理/<title>
 
 


 

 <transition>
 <component>
 /<transition>
 <button>switch/<button>
 

vue中 animate.css 動畫

 
 <title>在Vue中使用 animate.css 庫/<title>
 
 <link>


 

 <transition> leave-active-class="animated shake">
 
animation

 /<transition>
 <button>toggle/<button>
 

在vue中同時使用過渡和動畫

 
 <title>在Vue中同時使用過渡和動畫/<title>
 
 <link>
 


 

 <transition> appear
 :duration="{enter: 1000, leave: 3000}"
 enter-active-class="animated jello fade-enter-active"
 leave-active-class="animated tada fade-leave-active"
 appear-active-class="animated jello fade-enter-active">
 
animation

 /<transition>
 <button>toggle/<button>
 

Vue中的 Js 動畫與 Velocity.js 的結合

 
 <title>Vue中的 Js 動畫與 Velocity.js 的結合/<title>
 
 <link>


 

 <transition> @enter="handleEnter"
 @after-enter="handleAfterEnter">
 
animation

 /<transition>
 <button>toggle/<button>
 

Vue中多個元組件的過渡

 
 <title>Vue中多個元組件的過渡/<title>
 
 


 

 <transition>
 <component>
 /<transition>
 <button>toggle/<button>
 

封裝vue中的動畫組件

 
 <title>封裝vue中的動畫組件/<title>
 


 

 <fade>
 
hello transition

 /<fade>
 <button>toggle/<button>