vue中使用animate.css實現(xiàn)炫酷動畫效果
animate.css 是一個來自國外的 CSS3 動畫庫,它提供了抖動(shake)、閃爍(flash)、彈跳(bounce)、翻轉(flip)、旋轉(rotateIn/rotateOut)、淡入淡出(fadeIn/fadeOut)等多達 60 多種動畫效果,幾乎包含了所有常見的動畫效果。這些效果在大多數(shù)支持CSS3的瀏覽器上都能保持一致。簡單來說,我們使用它,只需要寫很少的代碼,就可以實現(xiàn)非常炫酷的動畫效果。
1.安裝(在vscode終端中,使用npm安裝)
npm install animate.css
2.引入
在Test.vue中引入
import 'animate.css'
3.代碼實現(xiàn)
Test.vue文件如下:
<template> <div> <button @click="isShow = !isShow">顯示/隱藏</button> <!-- appear:一上來就有動畫效果 enter-active-class:設置進入的動畫 leave-active-class:設置離開的動畫 --> <!-- <transition appear name="animate__animated animate__bounce" enter-active-class="animate__slideInUp" leave-active-class="animate__zoomOut" > <h2 v-show="isShow">animate.css!</h2> </transition> --> <transition-group appear name="animate__animated animate__bounce" enter-active-class="animate__swing" leave-active-class="animate__backOutUp" > <h2 v-show="!isShow" key="1">你好啊!</h2> <!--一定要設置key--> <h2 v-show="isShow" key="2">animate.css!</h2> </transition-group> </div> </template> <script> import 'animate.css' export default { name:'Test3', data(){ return { isShow:true } } } </script> <style scoped> h2{ background-color: skyblue; } </style>
在App.vue中注冊、使用Test.vue即可
<template> <div> <Test/> </div> </template> <script> import Test from './components/Test' export default { name:'App', components:{Test} } </script> <style> </style>
注意:
- 要想使用animate.css, 需要把相關標簽用
<transition>.....</transition>
進行包裹,只能包裹單個標簽。 - 使用
<transition-group>.....</transition-group>
可以包裹多個標簽,注意一定要加key
這個屬性值 - appear :表示一上來就有動畫效果。相當于:
:appear = 'true'
- 自定義修改
進入、離開的動畫可以從官網中選擇自己喜歡的,點擊上圖中紅線框標識進行復制,直接替換掉下圖中紅線框內容即可。
5、使用:duration
設置動畫統(tǒng)一的運行時長,單位:ms
<!-- 設置入場和離場的運行時長都是一樣的 時間單位:ms <transition :duration="1000">...</transition> --> <transition appear name="animate__animated animate__bounce" enter-active-class="animate__slideInUp" leave-active-class="animate__zoomOut" :duration="1000" > <h2 v-show="isShow">animate.css!</h2> </transition> <!-- 分開設置入場`enter`和離場`leave`的運行時長。 <transition :duration="{ enter: 500, leave: 800 }">...</transition> --> <transition appear name="animate__animated animate__bounce" enter-active-class="animate__slideInUp" leave-active-class="animate__zoomOut" :duration="{ enter:200, leave:1500 }" > <h2 v-show="isShow">animate.css!</h2> </transition>
到此這篇關于vue中使用animate.css實現(xiàn)動畫效果的文章就介紹到這了,更多相關vue使用animate.css動畫效果內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家!
相關文章
vue+elementUI組件遞歸實現(xiàn)可折疊動態(tài)渲染多級側邊欄導航
這篇文章主要介紹了vue+elementUI組件遞歸實現(xiàn)可折疊動態(tài)渲染多級側邊欄導航,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧2021-04-04vue3+ts+Vuex中使用websocket協(xié)議方式
這篇文章主要介紹了vue3+ts+Vuex中使用websocket協(xié)議方式,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2022-10-10vue+vue-meta-info動態(tài)設置meta標簽教程
這篇文章主要介紹了vue+vue-meta-info動態(tài)設置meta標簽教程,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2022-04-04