使用场景
在做主页轮播的时候，有用到 swiper插件； 需求是，轮播切换的时候，轮播上的图片及文字添加动画，缓缓出现。 搭配 swiper使用，可以选择 animate.css；
这里主要介绍 animate.css的安装及页面使用，页面有用到的swiper 相关的就不介绍了，详情可以翻看上篇文章，上篇文章针对 swiper在 vue3中的使用有详细的使用教程。
使用
- 切换到项目终端 ，输入命令
npm install animate.css --save, 进行安装 - 在
main.js里，引入animate.css并使用，具体代码如下；
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import VueAwesomeSwiper from 'vue-awesome-swiper';
import 'swiper/css';
import animated from "animate.css"
createApp(App).use(VueAwesomeSwiper).use(animated).use(router).mount('#app')
- 在用到轮播的页面里，针对需要添加动画的
div添加animate官方的动画对应的类名，比如这里我需要的场景是：文字从右侧缓缓出现，所以找到官方对应的效果是fadeInRight，这里直接在需要添加动画的文字div上添加类名即可。代码如下：
<template><div class="index"><swiper:modules="modules":loop="true":slides-per-view="1":space-between="50":autoplay="{ delay: 5000, disableOnInteraction: false }":pagination="{ clickable: true }":scrollbar="{ draggable: false }"class="swiperBox"><swiper-slide v-for="(item,index) in state.bannerList" :key="index"><img :src="item.imgUrl" alt="" class="banner"><div class="title animates fadeInRight">{{item.title}}</div></swiper-slide></swiper></div>
</template>
</script>
// 这里引入的swiper，及swiper相关的定义使用，就不写了；具体看上篇文章
</script>
<style lang="less" scoped>.index {.swiper-slide {position: relative;.title {position: absolute;top:350px;left: 200px;font-size: 28px;line-height: 42px;margin-top: 10px;height: 63px;font-weight: 450;color: #fff;text-shadow: 3px 4px 12px rgb(0 0 0 / 82%);}}// 切换轮播后的active 动画设置时间及延迟.swiper-slide-active .animate {animation-duration: 2s;animation-fill-mode: both;-webkit-animation-duration: 2s;-webkit-animation-fill-mode: both;}// 这里是animate对应的动画名称.swiper-slide-active .fadeInRight{-webkit-animation-name: fadeInRight;animation-name: fadeInRight;}}
</style>
总结： 更多animate.css动画效果，可查看官网animate
