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>