Vue3.2中安装animate.css，搭配swiper轮播使用

使用场景

在做主页轮播的时候，有用到 swiper插件； 需求是，轮播切换的时候，轮播上的图片及文字添加动画，缓缓出现。 搭配 swiper使用，可以选择 animate.css；
这里主要介绍 animate.css的安装及页面使用，页面有用到的swiper 相关的就不介绍了，详情可以翻看上篇文章，上篇文章针对 swiper在 vue3中的使用有详细的使用教程。

使用

1. 切换到项目终端 ，输入命令 npm install animate.css --save , 进行安装
2. 在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')

3. 在用到轮播的页面里，针对需要添加动画的 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