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;*/
}