初识 Vue（24）---（Vue 中同时使用过渡和动画）

Vue 中同时使用过渡和动画

在上篇博客 《Vue 中使用 animate.css 库》基础上开始这篇博客

在上篇博客中，完成了 引入 animate.css 库 且实现动画的效果，但发现，在刚开始时元素并没有动画效果

若想让元素刚开始时也具备动画效果，则

	
	
	
	
	


	

		
			
hello world
		

		切换

	
	

在刚开始时就会有动画效果

输出：上下抖动---正常--- 左右抖动---消失---上下抖动---正常

                  

引入 animate.css 库 实质还是 @keyframe（CSS3） 的形式，如果想将其和  过渡效果 同时展现出来，则

	
	
	
	
	


	

		
			
hello world
		

		切换

	
	

输出：上下抖动---正常--- 左右抖动---（逐渐）消失---上下抖动---（逐渐）正常

                  

但有个问题，设置 transition: opacity 3s;  是3秒；但知 swing 和 shake 都是 1秒；会导致冲突，则添加 type="transition"，以较长的时间的时长为准

		
		
			
hello world
		

还可以自定义播放时长：  :duration="5000"    5秒

		
		
			
hello world
		

复杂一些：：duration="{enter:5000,leave:10000}"    入场5秒 ，离厂10秒