初识 Vue（23）---（Vue 中使用 animate.css 库）

Vue 中使用 animate.css 库

在上篇博客 《初识 Vue---（Vue中CSS动画原理）》基础上开始这篇博客

在上篇完成 缓慢出现和隐藏功能 基础上，添加放大和缩小功能

	
	
	
	


	

		
			
hello world
		

		切换

	
	

输出：点击放大后缓慢消失，再点击出现后放大，最终恢复到正常大小

                      

需要注意的就是使用 keyframes 方法定义样式

@keyframes bounce-in {
            0%{
                transform: scale(0);
            }
            50%{
                transform: scale(1.5);
            }
            100%{
                transform: scale(1);
            }
        }

 

自定义函数名称

	
	
	
	


	

		
			
hello world
		

		切换

	
	

与上述的功能完全相同，通过这个功能我们就可以使用 Animate.css 这个 CSS 动画库了

	
	
	
	
	


	

		
			
hello world
		

		切换

	
	

输出：点击--左右抖动--消失---再点击--出现---上下抖动---正常