Vue.js学习开发五-----Vue动画

5-1.Vue 中Css动画原理:  过渡动画效果
未开始时候添加两个CSS类。给起的名字name="fade"
.fade-enter  动画第二帧就移除
.fade-enter-active，动画结束时移除
代码如下：代码为执行时的一瞬间。


  

  	
  	
helloword
  	
  	切换
  	
  
  
	
5-2.使用animate.css库

前提利用@keyframe实现放大缩小，同时可以使用自定义的类，如下.active,和.leave,
所以我们也可以使用animate.css的库。
@keyframes  bounce-in{
		0% {
			transform: scale(0);
		}
		50% {
			transform: scale(1.5);
		}
		100% {
			transform: scale(1);
		}
		
	}
		.active{
			transform-origin: left center;
			animation: bounce-in 1s;
		}
		.leave{
		    transform-origin: left center;
		    animation: bounce-in 1s reverse;
		}
		
		
	

  

  	
  	
helloword
  	
  	切换
  	
  
  


animate.css库：
 自定义的Css 中的Class


  	
  	
helloword
  	
  	切换
  	
  
  


5-3在Vue中使用过度和动画
   



  

  	
  	
helloword
  	
  	切换
  	
  
  

5-4Vue中的js动画，Velocity
 入场动画js钩子：出场动画钩子，响应改为leave就好。


  		
  	
helloword
  	
  	toggle
  	
  
  

Velocity的应用,需要在duration:1000,1秒后，添加done()，调动after-enter

body>
  

  		
  	
helloword
  	
  	toggle