目錄
在 Vue 項目中使用 animate.css
參考文章：【animate.css在vue項目中的使用】
本文 animate 版本：v4.1.0
在vue項目中使用動畫其實有多種方式，可以使用vue中的過渡transition，可以使用animate動畫與transition配合使用，也可以單獨使用animate動畫庫（詳情可見：【vue文檔-進入/離開 & 列表過渡】），下面我們開始介紹在vue中單獨使用animate動畫，其實也非常簡單，簡單三步就可以實現：
第一步：安裝
在命令行中執行：npm install animate.css --save
第二步：引入及使用
main.js 中：
import animated from 'animate.css' // npm install animate.css --save安裝，在引入
Vue.use(animated)
第三步：頁面中使用（相比網上搜到的教程，有改動的地方）
vue模板中：
<div class="ty">
<!-- animate__animated 這個類屬性是必須加的，應用的動畫類也需要加上 animate__ 前綴 -->
<div class="box animate__animated animate__bounceInLeft"></div>
</div>
（如果要自定義動畫可以配合vue的過渡使用）
如何找到想要的動畫
- 【AnimateCss 官網】（下方有文檔，純英文的，有空的同學可以研究一下）
在 animatecss 官網選擇自己想要的動畫，復制其類名，加在想要綁定動畫的元素的 class 屬性里
題外話
瞅了一眼：【vue文檔-進入/離開 & 列表過渡】，有很多騷操作，可以動畫開始前后等時間點執行js函數等，但這里旨在提高開發效率，應用動畫樣式，就不具體展開，涉及到這種極個別的需求時再去翻閱文檔即可
vue 方式給元素綁定進入動畫、消失動畫、點擊動畫
留個引子，后續可以擴展
動畫效果
代碼
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.0.0/animate.min.css" />
<!-- 開發環境版本，包含了有幫助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<style type="text/css">
.animateDiv {
width: 18.75rem;
height: 18.75rem;
background-color: bisque;
margin: 0 auto;
}
button {
margin: 0 auto;
}
</style>
</head>
<body>
<div id="app">
<div :class="['animateDiv', 'animate__animated', animate]" @click="sharkAnimate"></div>
<button type="button" @click="animate = animate === 'animate__fadeInDown' ? 'animate__fadeOutRightBig' : 'animate__fadeInDown'">切換顯示</button>
</div>
<script type="text/javascript">
var app = new Vue({
el: '#app',
data: {
// message: 'Hello Vue!',
needShow: true,
shark: true,
animate: 'animate__fadeInDown'
},
methods: {
sharkAnimate() {
// this.animate = 'animate__jello'
document.querySelector(".animateDiv").className = "animateDiv animate__animated";
setTimeout(() => {
document.querySelector(".animateDiv").className = "animateDiv animate__animated animate__jello";
}, 0);
}
}
})
</script>
</body>
</html>