【仙剑专场】掰正vue2中的swiper Animate动画的使用

这是我参与11月更文挑战的第1天，活动详情查看：2021最后一次更文挑战

介绍

众所周知，Swiper Animate是在Swiper内快速制作CSS3动画效果的小插件，适用于Swiper2.x以上 。之前模块化工程化没那么普及之前，大家都用cdn引入没有任何问题。但是如果在vue做模块化中使用，就会报错，出了诸多问题，本期就是让刚开始学习使用的同学，紧急毕坑，防止浪费宝贵的时间。

下面，就是在vue2中使用Swiper Animate实现的案例效果：

正文

1.安装

我们在vue2中使用swiper建议使用5.x的版本，而如果在vue3大家则直接可以用7.x的。我们在这个案例中为了稳定使用了swiper5.4.5，我们这就来安装一下：

yarn add swiper@5.4.5
// 或者
npm i -S swiper@5.4.5

2.结构

<template>
  <div class="swiper-container" ref="swiper">
    <div class="swiper-wrapper">
      <div class="swiper-slide">
          <!-- 内容 -->
      </div>
      <div class="swiper-slide">
       	  <!-- 内容 -->
      </div>
    </div>
    <!-- 分页器 -->
    <div class="swiper-pagination"></div>
    <!-- 左箭头 -->
    <div class="swiper-button-prev"></div>
    <!-- 右箭头 -->
    <div class="swiper-button-next"></div>
  </div>
</template>
<script>
import "swiper/css/swiper.css";
import Swiper from "swiper";
export default {
  name: "Banner",
  data() {
    return {
      swiper: null
    };
  },
  mounted() {
    this.init();
  },
  methods: {
    init() {
      this.swiper = new Swiper(this.$refs.swiper, {
        pagination: {
          el: ".swiper-pagination"
        },
        navigation: {
          nextEl: ".swiper-button-next",
          prevEl: ".swiper-button-prev"
        },
        loop: true
      });
    }
  }
};
</script>    

这就是swiper的基本结构大致就是这样，这时，我们可以看到一个普通轮播就这么实现了：

这里还是很简单的，只要版本对了，看着文档可以自己改造想要的形式。

接下来，最重要的问题来了，怎么实现动画呢？

3.动画

使用过swiper的同学一定直接会拿官方的提供的swiper.animate去用，但是那么问题来了，你会发现没发去import引入，或者你通过require导入后没有办法拿到官方说的swiperAnimateCache函数去隐藏元素还有swiperAnimate函数去初始化动画。

原因就是官方提供的是压缩后的而且没有进行函数导出：

所以，我们先要做的就是，让他把这些几个函数能导出来，在vue中能接收到：

这里我整理了一份，有需要的小伙伴可以从我在gitee仓库里拿取使用。

现在准备好了，这些函数可以放心导出了，那么我们就要写他的动画结构和函数使用了。

<template>
<!-- ... -->
<div class="swiper-slide">
	<div class="title">
        <h2 class="ani"
            swiper-animate-effect="fadeIn"
            swiper-animate-duration="1s"
            swiper-animate-delay=".2s"
            >十里坡山神庙</h2>
    </div>
</div>    
<!-- ... -->
</template>

swiper-animate-effect：动画名称

swiper-animate-duration：持续事件

swiper-animate-delay：等待时间

别忘了class要加上ani证明，swiper.animate用documentElement.querySelectorAll('.ani')捕获当前所有的要执行动画节点的。

光是这样还不够，我们要用在swiper生命周期的初始化中去用刚才导出的swiperAnimateCache函数去隐藏动画元素和swiperAnimate函数去动画初始化，还有在切换事件中用也要初始化一下，使其重新播放。

<script>
import "../lib/animate.css";
import {
  swiperAnimateCache,
  swiperAnimate
} from "../lib/swiper.animate1.0.3.js";
    // ...
    this.swiper = new Swiper(this.$refs.swiper, {
    // ..
	on: {
        init: function() {
            swiperAnimateCache(this);
            swiperAnimate(this);
        },
        slideChangeTransitionEnd: function() {
            swiperAnimate(this);
        }
    }
    //..
</script>

这里跟官方提供的一样，当然你可以用slideChange去触发动画初始化也是可以实现的。

现在我们就可以随心所欲的实现各式各样的Animate.css动画了。

结语

我们可以看出只要swiper版本在vue2中使用正确就没那么多问题，还有swiper.animate官方提供的js文件没导出函数，没进行模块化开发，是其没法实现动画的重要原因。

另外，经实验目前最新的Swiper7.x也可以正常使用，但是如果使用Swiper7.x建议使用vue3去开发，官方文档，因为vue3是CompositionAPI，拆解抽离更加清晰，如果项目中使用了vue3，大家都选择7.x吧，如果是vue2的话最好使用3.x或者5.x。