一款非常好用的css動畫庫--animate.css
阿新 • • 發佈：2019-02-08
今天再學習vue.js的時候看到了一個不錯的css庫，vue官方推薦（不一定要使用vue.js才能使用這個css庫），這個庫叫做animate.css，是個動畫效果的css庫，有好多不錯的動畫效果。
首先看怎麼引用，
然後是在實際專案中的使用：
<!DOCTYPE> <html> <head> <title>animate測試</title> <link rel="stylesheet" type="text/css" href="http://cdn.bootcss.com/animate.css/3.5.2/animate.min.css" /> <style> #box{ width:100px; height:100px; background:#ff0000; } </style> </head> <body> <div class="animated" id="box">animate</div> <button id="add">add</button> <button id="remove">remove</button> <script> var add = document.getElementById('add'); var remove = document.getElementById('remove'); var box = document.getElementById('box'); add.onclick = function(){ box.classList.add("bounceInLeft"); box.classList.remove("bounceOutLeft"); } remove.onclick = function(){ box.classList.add("bounceOutLeft"); box.classList.remove("bounceInLeft"); } </script> </body> </html>
可以看到我先是在頁面上構建了一個100*100的紅色方塊，賦予一個animated的類（必需），或者也可以在js中新增這個類，然後定義了兩個按鈕，分別給方塊新增bounceInLeft類和bounceOutLeft類，以及刪除相反的類（不刪除沒有效果），接著就可以在頁面上看到效果啦，按add按鈕會讓方塊從左邊滑入，按remove按鈕會讓方塊從左邊滑出。
當然這只是animate庫中的一個動畫效果，還有其他好多有趣的效果。下面展示效果種類一部分的截圖（具體所有效果可進入上方效果試用連結進行使用）：
在上方程式碼中，js部分還可以加上
box.classList.add('infinite');這樣子就會循壞動畫效果了。