vue3使用swiper+animate.css动效

场景：现在好多推广翻页的h5都会添加一些动效，大部分结合的是animate.css这个效果，参考

把夏日回忆 藏进自然笔记

animate.css动效是比较多样化并且很容易上手的css模板

那么swiper如何结合到这个animate.css呢

首先创建一个vue3的项目

1、进入swiper官网下载swiper_animate.js与animate.css

地址：下载Swiper - Swiper中文网Swiper各版本的下载地址，Swiper百度网盘下载https://www.swiper.com.cn/download/index.html

 下载这两个文件到本地之后放进项目里面

使用方法：

1、项目执行语句: 

npm install swiper

使用swiper8的版本

 

2、打开项目的main.js

// 引入css
import '../src/assets/css/animate.min.css'

// 定义swiper_animate.js
import * as swiperAni from "../src/assets/js/swiper_animate.js";

// 引入swiper
import "swiper/css";
import "swiper/css/navigation";
import "swiper/css/pagination";
import "swiper/css/scrollbar";

import {
    Swiper,
    SwiperSlide
} from "swiper/vue";
app.component('Swiper', Swiper)
app.component('SwiperSlide', SwiperSlide)

// 全局定义swiper_animate中的三个方法
app.config.globalProperties.swiperAnimateCache = swiperAni.swiperAnimateCache
app.config.globalProperties.swiperAnimate = swiperAni.swiperAnimate
app.config.globalProperties.clearSwiperAnimate = swiperAni.clearSwiperAnimate

3、.vue页面使用

html

 <swiper
        direction="vertical"
        @swiper="onSwiper"
        @slideChange="onSlideChange"
        :height="height"
        :speed="600"
        ref="mySwipers"
        class="swiper-box"
      >
        <swiper-slide class="page-box box1">
          <div class="safe-box">、
            <img
              class="ani vw-img"
              :src="url + 'img1_1.png'"
              swiper-animate-effect="fadeInUp"
              swiper-animate-duration="1s"
              swiper-animate-delay="1.1s"
            />
            <img
              class="ani vw-img"
              :src="url + 'img1_2.png'"
              swiper-animate-effect="fadeInUp"
              swiper-animate-duration="1s"
              swiper-animate-delay="1.45s"
            />
            <img
              class="ani vw-img"
              :src="url + 'img1_3.png'"
              swiper-animate-effect="fadeInUp"
              swiper-animate-duration="1s"
              swiper-animate-delay="1.7s"
            />
            <img
              class="ani vw-img img1_4"
              :src="url + 'img1_4.png'"
              swiper-animate-effect="fadeInUp"
              swiper-animate-duration="1s"
              swiper-animate-delay="2.1s"
            />
            <img
              class="ani vw-img"
              :src="url + 'img1_5.png'"
              swiper-animate-effect="fadeInUp"
              swiper-animate-duration="1s"
              swiper-animate-delay="2.4s"
            />
          </div>
        </swiper-slide>
       
      </swiper>

js

import {getCurrentInstance } from "vue";

export default {

setup() {

    // 为了获取全局定义的方法
    const { proxy } = getCurrentInstance();

    const onSwiper = (swiper) => {
      proxy.swiperAnimateCache(swiper);
      proxy.swiperAnimate(swiper);
    };
    const onSlideChange = (swiper) => {
      proxy.swiperAnimate(swiper);
    };

  
    return {
      onSwiper,
      onSlideChange,
    };
  },
}

解释：

class一定要加上ani,不然是没有效果 为什么要加这个class名呢，是因为swiper_animate.js中写了