vue中安装及使用animate.css

animate官网 https://animate.style/
一、npm安装animate.css

npm install animate.css --save

 

二、main.js页面引入animate
//animate动画库

import animated from 'animate.css' // npm install animate.css --save安装，再引入
Vue.use(animated)

三、页面应用
vue应用animate有几种方法，这里介绍常用的两种
1、直接使用类名

<h1 class="animate__animated animate__flash">
Animate.css //class内不管是用哪个动画效果，animate__animated都一定要放，不然可能不会有想要的效果，后面那个便是要使用的动画类名，若要无限使用效果就加个infinite类名
</h1>

 

2、css中使用

h1{ //h1为要应用的地方，也可以使用类名和id等其他选择器
animation-name:flash ; //flash为要使用的动画效果名，在这里不需要加animate前缀
animation-duration: 3s; //这里设定完成该动画的时间
/*animation:turn 1s linear infinite;*/
}