Vue009_过渡&动画

 vue  动画的理解

1) 操作 css 的 trasition 或 animation
2) vue 会给目标元素添加/移除特定的 class
3) 过渡的相关类名
xxx-enter-active: 指定显示的 transition
xxx-leave-active: 指定隐藏的 transition
xxx-enter/xxx-leave-to: 指定隐藏时的样式

  基本过渡动画的编码

1) 在目标元素外包裹
2) 定义 class 样式
指定过渡样式: transition
指定隐藏时的样式: opacity/其它 

 

编码示例

	
		
		
		
	
	
		

			
				JD1
			
			
			
				
hello
			
		
		

			
				JD2
			
			
				
hello
			
		
		
		
		
	

结果展示

代码示例

	
		
		
		
	
	
		

			JD show
			


			
				
				
Look at me
			
		

		
		
	

 结果展示