vue --- 使用animate.css实现动画
生活随笔
收集整理的這篇文章主要介紹了
vue --- 使用animate.css实现动画
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
1.下載animate.css
npm install --save-dev animate.css// 注意你使用的源 nrm ls(若沒有改變可以忽略)2.導入animate.css
<link rel="stylesheet" href="../node_modules/animate.css/animate.css"> // 注意你的當前文件和node_moudules文件夾的相對位置3.動畫需要綁定<transition>內
<transition enter-active-class="bounceInRight" leave-active-class="bounceOutRight" :duration="{enter:1000, leave:1200}"><h1 v-show="flag" class="animated"> 這是一個H1</h1> </transition>// 1. vue中,動畫需放在transition里面. // 2.enter-active-class是入場的動畫類,可以通過animate.css官網查看. // 3.所有動畫類必須基于一個animated基類4.總體代碼如下:
<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><link rel="stylesheet" href="../node_modules/animate.css/animate.css"></head><body><div id="app"><button @click="flag=!flag">點擊</button><transition enter-active-class=" bounceInRight" leave-active-class=" bounceOutRight" :duration="{enter:1000, leave:1200}"><h3 v-show="flag" class="animated">這是一個H3</h3></transition></div><script src="../node_modules/vue/dist/vue.js"></script><script>const app = new Vue({el: '#app',data: {flag: false},methods: {},})</script> </body></html>總結
以上是生活随笔為你收集整理的vue --- 使用animate.css实现动画的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 区分大小屏幕_VESA持续推动Displ
- 下一篇： CSS cursor鼠标样式一览表