vue2 中使用 Swiper Animate

Swiper 官网
首先使用命令安装以下依赖

npm install swiper vue-awesome-swiper --save
npm install animate.css

在 main.js 中引入 vue-awesome-swiper 和 css 文件

import VueAwesomeSwiper from 'vue-awesome-swiper'
import 'swiper/css/swiper.css'
Vue.use(VueAwesomeSwiper, /* { default options with global component } */ )

在 main.js 中引入 animate.css

const animated = require('animate.css');
or
import animated from "animate.css"
Vue.use(animated)

写博客时，嫌麻烦直接拷的项目中的代码，自行取需要的，加动画的元素必加 class 为 ani，更换动画直接换 swiper-animate-effect 属性值，swiper-animate-duration 是持续时间，swiper-animate-delay 是延迟

html:
<swiper :slides-per-view="3" :space-between="50" :options="swiperOptions" @swiper="onSwiper" @slideChange="onSlideChange">
      <swiper-slide class="swiper1">
        <div class="box">
          <h3 class="ani" swiper-animate-effect="fadeInUp" swiper-animate-duration="1s" swiper-animate-delay="0.3s">1</h3>
          <h3 class="ani" swiper-animate-effect="fadeInUp" swiper-animate-duration="1s" swiper-animate-delay="0.3s">2</h3>
          <p class="ani" swiper-animate-effect="bounceInLeft" swiper-animate-duration="2s" swiper-animate-delay="0.3s">3</p>
          <p class="ani" swiper-animate-effect="bounceInLeft" swiper-animate-duration="2s" swiper-animate-delay="0.3s">4</p>
        </div>
      </swiper-slide>
      <swiper-slide class="swiper2">
        <div class="box"></div>
      </swiper-slide>
      <swiper-slide class="swiper3">
        <div class="box"></div>
      </swiper-slide>
    </swiper>
js里的data:
data() {
    let that=this
    return {
      swiperOptions: {
        autoplay: true,
        autoplay: {
          delay: 5000,
        },
        loop: true,
        // direction: "vertical",
        initialSlide: 0,
        on: {
          init: function () {
            that.$swiperAnimateCache(this); //隐藏动画元素
            that.$swiperAnimate(this); //初始化完成开始动画
          },
          slideChange: function () {
            that.$swiperAnimate(this); //每个slide切换结束时也运行当前slide动画
            //that.slides.eq(this.activeIndex).find('.ani').removeClass('ani'); 动画只展现一次，去除ani类名
          },
        },
      },
    };

具体有哪些动画可以看官网

❀❀❀❀❀❀ 完结散花 ❀❀❀❀❀❀

Written ❤️ sywdebug.