快捷導(dǎo)航

vue中使用Animate.css的教程詳解

更新時間：2023年08月23日 09:06:32 作者：會說法語的豬

Animate.css這個動畫庫,很多的動畫在這個庫里面都定義好了,我們用的時候可以直接使用里面的類名就可以,下面我們就來看看如何在vue項(xiàng)目中使用Animate.css吧

說一下Animate.css這個動畫庫，很多的動畫在這個庫里面都定義好了，我們用的時候可以直接使用里面的類名就可以了，就是直接目標(biāo)元素綁定對應(yīng)的類名就可以實(shí)現(xiàn)動畫效果，非常方便，庫其實(shí)也相對簡單，使用起來也簡單。這里示例就以v3為例了，v2也是一樣的

github：https://github.com/animate-css/animate.css

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

首先安裝

pnpm add animate.css

引入

main.js

import 'animate.css'

使用

接下來就可以正常使用了

注意：在添加類名的時候，里面所有的動畫必須先設(shè)置上 animate__animated ，然后再設(shè)置對應(yīng)動畫的類名，否則是不會生效的，大家簡單看一下源碼就能了解

下面是個示例：

接下來代碼：

<template>
  <div class="main">
    <label for=""><span style="fontSize: 13px;margin-right: 5px;">開啟無限輪詢</span></label>
    <input v-model="isInfinite" type="checkbox">
    <div class="animates-container">
      <button v-for="animateName in animateNames1" :key="animateName" @click="setAnimate(animateName)">{{ animateName }}</button>
    </div>
    <div class="animates-container">
      <button v-for="animateName in animateNames2" :key="animateName" @click="setAnimate(animateName)">{{ animateName }}</button>
    </div>
    <div class="animates-container">
      <button v-for="animateName in animateNames3" :key="animateName" @click="setAnimate(animateName)">{{ animateName }}</button>
    </div>
    <div class="animates-container">
      <button v-for="animateName in animateNames4" :key="animateName" @click="setAnimate(animateName)">{{ animateName }}</button>
    </div>
    <div class="animates-container">
      <button v-for="animateName in animateNames5" :key="animateName" @click="setAnimate(animateName)">{{ animateName }}</button>
    </div>
    <div class="animates-container">
      <button v-for="animateName in animateNames6" :key="animateName" @click="setAnimate(animateName)">{{ animateName }}</button>
    </div>
    <div class="animates-container">
      <button v-for="animateName in animateNames7" :key="animateName" @click="setAnimate(animateName)">{{ animateName }}</button>
    </div>
    <div class="animates-container">
      <button v-for="animateName in animateNames8" :key="animateName" @click="setAnimate(animateName)">{{ animateName }}</button>
    </div>
    <div class="animates-container">
      <button v-for="animateName in animateNames9" :key="animateName" @click="setAnimate(animateName)">{{ animateName }}</button>
    </div>
    <div class="animates-container">
      <button v-for="animateName in animateNames10" :key="animateName" @click="setAnimate(animateName)">{{ animateName }}</button>
    </div>
    <div class="testAnimate" :class="[`${animationsClass()}`, { 'animate__infinite': isInfinite }]"></div>
  </div>
</template>
<script setup>
import { ref } from 'vue'
let animateNames1 = [
  'bounce',
  'flash',
  'pulse',
  'rubberBand',
  'shakeX',
  'shakeY',
  'headShake',
  'swing',
  'tada',
  'wobble',
  'jello',
  'heartBeat',
]
let animateNames2 = [
  'backInDown',
  'backInLeft',
  'backInRight',
  'backInUp',
  'backOutDown',
  'backOutLeft',
  'backOutRight',
  'backOutUp'
]
let animateNames3 = [
  'bounceIn',
  'bounceInDown',
  'bounceInLeft',
  'bounceInRight',
  'bounceInUp',
  'bounceOut',
  'bounceOutDown',
  'bounceOutLeft',
  'bounceOutRight',
  'bounceOutUp',
]
let animateNames4 = [
  'fadeIn',
  'fadeInDown',
  'fadeInDownBig',
  'fadeInLeft',
  'fadeInLeftBig',
  'fadeInRight',
  'fadeInRightBig',
  'fadeInUp',
  'fadeInUpBig',
  'fadeInTopLeft',
  'fadeInTopRight',
  'fadeInBottomLeft',
  'fadeInBottomRight',
  'fadeOut',
  'fadeOutDown',
  'fadeOutDownBig',
  'fadeOutLeft',
  'fadeOutLeftBig',
  'fadeOutRight',
  'fadeOutRightBig',
  'fadeOutUp',
  'fadeOutUpBig',
  'fadeOutTopLeft',
  'fadeOutTopRight',
  'fadeOutBottomRight',
  'fadeOutBottomLeft'
]
let animateNames5 = ref([
  'flip',
  'flipInX',
  'flipInY',
  'flipOutX',
  'flipOutY'
])
let animateNames6 = ref([
  'lightSpeedInRight',
  'lightSpeedInLeft',
  'lightSpeedOutRight',
  'lightSpeedOutLeft'
])
let animateNames7 = ref([
  'rotateIn',
  'rotateInDownLeft',
  'rotateInDownRight',
  'rotateInUpLeft',
  'rotateInUpRight',
  'rotateOut',
  'rotateOutDownLeft',
  'rotateOutDownRight',
  'rotateOutUpLeft',
  'rotateOutUpRight'
])
let animateNames8 = ref([
  'hinge',
  'jackInTheBox',
  'rollIn',
  'rollOut'
])
let animateNames9 = ref([
  'zoomIn',
  'zoomInDown',
  'zoomInLeft',
  'zoomInRight',
  'zoomInUp',
  'zoomOut',
  'zoomOutDown',
  'zoomOutLeft',
  'zoomOutRight',
  'zoomOutUp'
])
let animateNames10 = ref([
  'slideInDown',
  'slideInLeft',
  'slideInRight',
  'slideInUp',
  'slideOutDown',
  'slideOutLeft',
  'slideOutRight',
  'slideOutUp'
])
let animates = ref([])
let isInfinite = ref(false)
const setAnimate = animateName => {
  animates.value.shift()
  animates.value.push(animateName)
}
const animationsClass = () => {
  if (animates.value.length) {
    return `animate__animated animate__${animates.value[0]}`
  }
  return ''
}
</script>
<style scoped>
.main {
  width: 100%;
  height: 100%;
  padding: 40px 0 0 50px;
  box-sizing: border-box;
  overflow: hidden;
}
.main button {
  margin-right: 8px;
  cursor: pointer;
}
.animates-container {
  margin: 20px 0;
}
.main .testAnimate {
  width: 300px;
  height: 300px;
  background-color: red;
  margin: 50px 0 0 10px;
  padding: 30px;
  box-sizing: border-box;
}
</style>

到此這篇關(guān)于vue中使用Animate.css的教程詳解的文章就介紹到這了,更多相關(guān)vue Animate.css內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: