Animate.css在vue中的使用方式
更新時(shí)間：2024年07月24日 15:21:20 作者：FIRE
這篇文章主要介紹了Animate.css在vue中的使用方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
Animate.ss的動(dòng)畫效果超可愛的，用起來也方便，最近用了，記錄一下
vue animate.css的安裝和使用
安裝
npm install animate.css --save //或者 yarn add animate.css
使用
在入口文件中引入
import animate from 'animate.css' Vue.use(animate)
選擇你要的樣式
打開官網(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)畫控制的元素包裹起來-->
<!--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.js,ajax渲染頁(yè)面的實(shí)例，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2018-02-02
Vue3 使用Vuex和router的注意事項(xiàng)及操作方法
在vue2中 使用的?this.$route?和?this.$router?this.$store的使用在vue3中完全適用，這篇文章主要介紹了Vue3 使用Vuex和router的注意事項(xiàng)及操作方法,需要的朋友可以參考下2022-12-12
vue項(xiàng)目使用md5加密、crypto-js加密、國(guó)密sm3及國(guó)密sm4的方法
密碼或者其他比較重要東西假如使用明文傳輸中是很危險(xiǎn)的,所以就需要前端一些加密協(xié)議,對(duì)密碼、手機(jī)號(hào)、身份證號(hào)等信息進(jìn)行保護(hù),下面這篇文章主要給大家介紹了關(guān)于vue項(xiàng)目中使用md5加密、crypto-js加密、國(guó)密sm3及國(guó)密sm4的相關(guān)資料,需要的朋友可以參考下2022-12-12
vue 項(xiàng)目接口管理的實(shí)現(xiàn)
在vue開發(fā)中，會(huì)涉及到很多接口的處理，當(dāng)項(xiàng)目足夠大時(shí)，就需要定義規(guī)范統(tǒng)一的接口，本文就來介紹一下vue 項(xiàng)目接口管理，具有一定的參考價(jià)值，感興趣的小伙伴可以一起來了解一下2019-01-01
這篇文章主要介紹了面試官：為什么Vue中的v-if和v-for不建議一起用，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-01-01
這篇文章主要介紹了Vue細(xì)節(jié)，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-04-04
本篇文章主要介紹了Vue.js學(xué)習(xí)筆記之修飾符，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-07-07
這篇文章主要為大家學(xué)習(xí)介紹了如何利用Vue2實(shí)現(xiàn)全局水印的效果，文中的示例代碼簡(jiǎn)潔易懂，具有一定的借鑒價(jià)值，感興趣的小伙伴可以了解下2023-07-07
Vue.js綁定HTML class數(shù)組語(yǔ)法錯(cuò)誤的原因分析
Vue.js綁定HTML class數(shù)組語(yǔ)法錯(cuò)誤有哪些原因?qū)е碌哪?，該如何解決呢？下面小編給大家分享Vue.js綁定HTML class數(shù)組語(yǔ)法錯(cuò)誤的原因分析，感興趣的朋友一起看看吧2016-10-10
解決Vue+Element ui開發(fā)中碰到的IE問題
今天小編就為大家分享一篇解決Vue+Element ui開發(fā)中碰到的IE問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2018-09-09