Vue使用Animate.css

说一下Animate.css这个动画库，很多的动画在这个库里面都定义好了，我们用的时候可以直接使用里面的类名就可以了，就是直接目标元素绑定对应的类名就可以实现动画效果，非常方便，库其实也相对简单，使用起来也简单。这里示例就以v3为例了，v2也是一样的

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

官网：https://animate.style/

首先安装

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>