快捷導(dǎo)航

vue中使用animate.css實(shí)現(xiàn)炫酷動(dòng)畫(huà)效果

更新時(shí)間：2022年04月15日 10:57:40 作者：wanpi

這篇文章主要介紹了vue中使用animate.css實(shí)現(xiàn)動(dòng)畫(huà)效果,我們使用它，只需要寫(xiě)很少的代碼，就可以實(shí)現(xiàn)非常炫酷的動(dòng)畫(huà)效果，感興趣的朋友跟隨小編一起看看吧

animate.css 是一個(gè)來(lái)自國(guó)外的 CSS3 動(dòng)畫(huà)庫(kù)，它提供了抖動(dòng)（shake）、閃爍（flash）、彈跳（bounce）、翻轉(zhuǎn)（flip）、旋轉(zhuǎn)（rotateIn/rotateOut）、淡入淡出（fadeIn/fadeOut）等多達(dá) 60 多種動(dòng)畫(huà)效果，幾乎包含了所有常見(jiàn)的動(dòng)畫(huà)效果。這些效果在大多數(shù)支持CSS3的瀏覽器上都能保持一致。簡(jiǎn)單來(lái)說(shuō)，我們使用它，只需要寫(xiě)很少的代碼，就可以實(shí)現(xiàn)非常炫酷的動(dòng)畫(huà)效果。

官網(wǎng)： https://animate.style/

1.安裝（在vscode終端中，使用npm安裝）

npm install animate.css

2.引入

在Test.vue中引入

import 'animate.css'

3.代碼實(shí)現(xiàn)

Test.vue文件如下：

<template>
  <div>
      <button @click="isShow = !isShow">顯示/隱藏</button>
       <!-- 
         appear:一上來(lái)就有動(dòng)畫(huà)效果
         enter-active-class:設(shè)置進(jìn)入的動(dòng)畫(huà)
         leave-active-class:設(shè)置離開(kāi)的動(dòng)畫(huà)

        -->
       <!-- <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>    <!--一定要設(shè)置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中注冊(cè)、使用Test.vue即可

<template>
  <div>
    <Test/>    
  </div>
</template>

<script>
import Test from './components/Test'
export default {
  name:'App',
  components:{Test}

}
</script>

<style>

</style>

注意：

要想使用animate.css, 需要把相關(guān)標(biāo)簽用<transition>.....</transition> 進(jìn)行包裹，只能包裹單個(gè)標(biāo)簽。
使用<transition-group>.....</transition-group>可以包裹多個(gè)標(biāo)簽，注意一定要加key 這個(gè)屬性值
appear :表示一上來(lái)就有動(dòng)畫(huà)效果。相當(dāng)于：:appear = 'true'
自定義修改

進(jìn)入、離開(kāi)的動(dòng)畫(huà)可以從官網(wǎng)中選擇自己喜歡的，點(diǎn)擊上圖中紅線框標(biāo)識(shí)進(jìn)行復(fù)制，直接替換掉下圖中紅線框內(nèi)容即可。

5、使用:duration設(shè)置動(dòng)畫(huà)統(tǒng)一的運(yùn)行時(shí)長(zhǎng),單位：ms

<!--
		設(shè)置入場(chǎng)和離場(chǎng)的運(yùn)行時(shí)長(zhǎng)都是一樣的
		時(shí)間單位：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> 
		<!--
			分開(kāi)設(shè)置入場(chǎng)`enter`和離場(chǎng)`leave`的運(yùn)行時(shí)長(zhǎng)。
			<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>

到此這篇關(guān)于vue中使用animate.css實(shí)現(xiàn)動(dòng)畫(huà)效果的文章就介紹到這了,更多相關(guān)vue使用animate.css動(dòng)畫(huà)效果內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: