Animate.css在vue中的使用方式
更新時(shí)間：2024年07月24日 15:21:20 作者：FIRE
這篇文章主要介紹了Animate.css在vue中的使用方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
Animate.ss的動(dòng)畫效果超可愛(ài)的，用起來(lái)也方便，最近用了，記錄一下
vue animate.css的安裝和使用
安裝
npm install animate.css --save //或者 yarn add animate.css
使用
在入口文件中引入
import animate from 'animate.css' Vue.use(animate)
選擇你要的樣式
打開(kāi)官網(wǎng)Animate.css
具體使用
在你需要?jiǎng)赢嫎邮降牡胤桨褬邮矫Q寫上就行
注意！一定要寫這個(gè)animated
animate.css在vue中的入場(chǎng)和離場(chǎng)動(dòng)畫
enter-active-class和leave-active-class在vue官網(wǎng)中有介紹
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>動(dòng)畫-未使用動(dòng)畫</title>
<link rel="stylesheet" href="css/animate.css" rel="external nofollow" />
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>
<style>
.demo{
width: 150px;
height: 150px;
background-color: pink;
}
</style>
</head>
<body>
<!--點(diǎn)擊按鈕讓h3顯示，再點(diǎn)擊，讓h3顯示-->
<div id="example">
<input type="button" value="btn" @click="flag=!flag"/>
<!--使用transtion元素把需要被動(dòng)畫控制的元素包裹起來(lái)-->
<!--transition元素是官方提供的-->
<!--使用animate.css庫(kù)-->
<transition enter-active-class="animated bounceIn" leave-active-class="animated bounceOut" :duration="400"><!--入場(chǎng)和離場(chǎng)的時(shí)間-->
<div v-if="flag" class="demo">
<span>animate.css的動(dòng)畫效果實(shí)現(xiàn)</span>
</div>
</transition>
</div>
<script>
var vm=new Vue({
el:'#example',
data:{
flag:false
}
})
</script>
</body>
</html>
總結(jié)
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
vue項(xiàng)目中頁(yè)面底部出現(xiàn)白邊及空白區(qū)域錯(cuò)誤的問(wèn)題
這篇文章主要介紹了vue項(xiàng)目中頁(yè)面底部出現(xiàn)白邊及空白區(qū)域錯(cuò)誤的問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-08-08
vue2+electron項(xiàng)目搭建過(guò)程
文章介紹了如何使用Vue CLI 2搭建Vue項(xiàng)目,并添加Electron插件vue-cli-plugin-electron-builder來(lái)創(chuàng)建一個(gè)Vue+Electron項(xiàng)目,文章還提供了啟動(dòng)和打包項(xiàng)目的方法,并提示了下載國(guó)內(nèi)網(wǎng)較慢的文件時(shí)可以先注釋掉代碼進(jìn)行調(diào)試,感興趣的朋友一起看看吧2025-01-01
vue2如何使用simple-keyboard軟鍵盤有中文(拼音)
這篇文章主要介紹了vue2如何使用simple-keyboard軟鍵盤有中文(拼音),具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2025-04-04
這篇文章主要介紹了vue3.0-monaco組件封裝存檔代碼解析,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友參考下吧2024-03-03
Vue遞歸組件+Vuex開(kāi)發(fā)樹(shù)形組件Tree--遞歸組件的簡(jiǎn)單實(shí)現(xiàn)
這篇文章也是我自己開(kāi)發(fā)的從無(wú)到有的過(guò)程，所以它可以為你提供一些Tree組件開(kāi)發(fā)的思路，本文重點(diǎn)給大家介紹vue遞歸組件的簡(jiǎn)單實(shí)現(xiàn)，感興趣的朋友跟隨小編一起看看吧2019-04-04
Vue中.env、.env.development及.env.production文件說(shuō)明
這篇文章主要給大家介紹了關(guān)于Vue中.env、.env.development及.env.production文件說(shuō)明的相關(guān)資料,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),對(duì)大家學(xué)習(xí)或者使用vue具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2022-09-09
本文主要介紹了vue父組件調(diào)用子組件的方法，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2022-04-04
springboot+vue+對(duì)接支付寶接口+二維碼掃描支付功能（沙箱環(huán)境）
這篇文章主要介紹了springboot+vue+對(duì)接支付寶接口+二維碼掃描支付（沙箱環(huán)境）,本文給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2020-10-10
使用 vue 實(shí)現(xiàn)滅霸打響指英雄消失的效果附demo
這篇文章主要介紹了使用 vue 實(shí)現(xiàn)滅霸打響指英雄消失的效果 demo,需要的朋友可以參考下2019-05-05
treeSelect樹(shù)組件設(shè)置父節(jié)點(diǎn)禁用的方法實(shí)例
這篇文章主要給大家介紹了關(guān)于treeSelect樹(shù)組件設(shè)置父節(jié)點(diǎn)禁用的相關(guān)資料,文中通過(guò)圖文以及示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2022-12-12