vue中使用Animate.css的教程详解
作者：会说法语的猪
Animate.css这个动画库,很多的动画在这个库里面都定义好了,我们用的时候可以直接使用里面的类名就可以,下面我们就来看看如何在vue项目中使用Animate.css吧
说一下Animate.css这个动画库，很多的动画在这个库里面都定义好了，我们用的时候可以直接使用里面的类名就可以了，就是直接目标元素绑定对应的类名就可以实现动画效果，非常方便，库其实也相对简单，使用起来也简单。这里示例就以v3为例了，v2也是一样的
github：https://github.com/animate-css/animate.css
首先安装
pnpm add animate.css
引入
main.js
import 'animate.css'
使用
接下来就可以正常使用了
注意：在添加类名的时候，里面所有的动画必须先设置上 animate__animated ，然后再设置对应动画的类名，否则是不会生效的，大家简单看一下源码就能了解
下面是个示例：
接下来代码：
<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>到此这篇关于vue中使用Animate.css的教程详解的文章就介绍到这了,更多相关vue Animate.css内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！