vue-cli3、swiper、swiper.animate配合使用

1.swiper安装使用

1.1下载swiper

cnpm install swiper --save-dev

1.2引入、使用swiper

引入可以在main.js中引入或者在使用的页面引入，一般如果多个页面使用swiper的时候选择在main.js全局引入。

1.2.1全局引入

1、main.js中引入

//1、main.js
import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'

import 'swiper/dist/css/swiper.min.css'
import 'swiper/dist/js/swiper.min'

Vue.config.productionTip = false

new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')

2、使用

<template>
  <div class="about">
   <div class="swiper-container">
    <div class="swiper-wrapper">
      <div class="swiper-slide">Slide 1</div>
      <div class="swiper-slide">Slide 2</div>
      <div class="swiper-slide">Slide 3</div>
    </div>
    <!-- 如果需要分页器 -->
    <div class="swiper-pagination"></div>

    <!-- 如果需要导航按钮 -->
    <div class="swiper-button-prev"></div>
    <div class="swiper-button-next"></div>

    <!-- 如果需要滚动条 -->
<!--    <div class="swiper-scrollbar"></div>-->
  </div>
  </div>
</template>

<script>
  import Swiper from 'swiper'
  export default {
    name:'Home',
    data(){
      return {
      }
    },
    mounted() {
      new Swiper ('.swiper-container', {
        loop: true,
        // 如果需要分页器
        pagination: '.swiper-pagination',
        // 如果需要前进后退按钮
        nextButton: '.swiper-button-next',
        prevButton: '.swiper-button-prev',
        // 如果需要滚动条
        // scrollbar: '.swiper-scrollbar',
        //如果需要自动切换海报
        // autoplay: {
        //   delay: 1000,//时间 毫秒
        //   disableOnInteraction: false,//用户操作之后是否停止自动轮播默认true
        // },
      })
    }
  }
</script>

<style lang="less" scoped>
.swiper-container{
  height: 500px;
  width: 100%;
  .swiper-wrapper{
    .swiper-slide{
      width: 100%;
      height: 100%;
      background-color: #42b983;
      text-align: center;
      line-height: 500px;
    }
  }
}
</style>

1.2.2组件中引入

<template>
  <div class="hello">
    <div class="swiper-container">
      <div class="swiper-wrapper">
        <div class="swiper-slide">
          slide1
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Swiper from "swiper"
import 'swiper/swiper.scss';

export default {
  name: 'HelloWorld',
  components: {
  },
  data() {
    return {

    }
  },
  mounted() {
    new Swiper('.swiper-container', {
      loop: false, // 循环模式选项
      speed: 1000,
      direction: 'vertical',
    })
  },
}
</script>

2.使用swiper.animate实现轮播切换后执行动画

1、安装animate.css
cnpm i animate.css@3.x --save
注意animate.css版本，4.x版本和之前版本写法不一样，我这里用的是3.x版本。如使用4.x版本可自行查看官方文档。
2、引入animate.js
在项目中新建一个animate.js，内容如下。

export function swiperAnimateCache() {
  const allBoxes = window.document.documentElement.querySelectorAll('.ani')
  for (var i = 0; i < allBoxes.length; i++) {
    allBoxes[i].attributes['style']
      ? allBoxes[i].setAttribute('swiper-animate-style-cache', allBoxes[i].attributes['style'].value)
      : allBoxes[i].setAttribute('swiper-animate-style-cache', ' ')
    allBoxes[i].style.visibility = 'hidden'
  }
}

export function swiperAnimate(a) {
  clearSwiperAnimate()
  var b = a.slides[a.activeIndex].querySelectorAll('.ani')
  for (var i = 0; i < b.length; i++) {
    b[i].style.visibility = 'visible'
    const effect = b[i].attributes['swiper-animate-effect']
      ? b[i].attributes['swiper-animate-effect'].value
      : ''
    b[i].className = b[i].className + ' ' + effect + ' ' + 'animated'
    const duration = b[i].attributes['swiper-animate-duration']
      ? b[i].attributes['swiper-animate-duration'].value
      : ''
    // duration && style
    const delay = b[i].attributes['swiper-animate-delay']
      ? b[i].attributes['swiper-animate-delay'].value
      : ''
    const style = b[i].attributes['style'].value + 'animation-duration:' + duration + ';-webkit-animation-duration:' + duration + ';' + 'animation-delay:' + delay + ';-webkit-animation-delay:' + delay + ';'
    // delay && (style = style )
    b[i].setAttribute('style', style)
  }
}

export function clearSwiperAnimate() {
  var allBoxes = window.document.documentElement.querySelectorAll('.ani')
  for (var i = 0; i < allBoxes.length; i++) {
    allBoxes[i].attributes['swiper-animate-style-cache'] && allBoxes[i].setAttribute('style', allBoxes[i].attributes['swiper-animate-style-cache'].value)
    allBoxes[i].style.visibility = 'hidden'
    allBoxes[i].className = allBoxes[i].className.replace('animated', ' ')
    const effectValue = allBoxes[i].attributes['swiper-animate-effect'].value
    /* eslint-disable-next-line */
    allBoxes[i].attributes['swiper-animate-effect'] && (effectValue, allBoxes[i].className = allBoxes[i].className.replace(effectValue, ' '))
  }
}

3、全局引入animate.css
main.js

import { createApp } from 'vue'
import App from './App.vue'
// rem h5 适配
import 'amfe-flexible'
import 'animate.css'
createApp(App).mount('#app')

4、swiper中使用动画
给使用动画的块级标签添加类名ani,属性添加
swiper-animate-effect="bounceInDown"动画类型
swiper-animate-duration="1s"动画持续时长
swiper-animate-delay="0s"动画延迟时长
更多用法和动画类型请参照swiper官网
https://www.swiper.com.cn/usage/animate/index.html

<template>
  <div class="hello">
    <div class="swiper-container">
      <div class="swiper-wrapper">
        <div class="swiper-slide bg1">
          <div class="ani item1 "
               swiper-animate-effect="bounceInDown"
               swiper-animate-duration="1s"
               swiper-animate-delay="0s">slide1</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Swiper from "swiper"
import * as swiperAni from '@/assets/js/animate.js'

import 'swiper/swiper.scss';
export default {
  name: 'HelloWorld',
  components: {
  },
  data() {
    return {

    }
  },
  mounted() {
    new Swiper('.swiper-container', {
      loop: false, // 循环模式选项
      speed: 1000,
      direction: 'vertical',
      on: {
        init: function () {
          swiperAni.swiperAnimateCache(this); //隐藏动画元素 
          swiperAni.swiperAnimate(this); //初始化完成开始动画
        },
        slideChangeTransitionStart: function () {
          swiperAni.swiperAnimate(this); //每个slide开始切换时也运行当前slide动画
          //this.slides.eq(this.activeIndex).find('.ani').removeClass('ani'); 动画只展现一次，去除ani类名
        }
      }
    })
  },
}
</script>

3.vue-awesome-swiper安装使用

1、安装
注意版本

cnpm i vue-awesome-swiper@3 --save-dev

cnpm i swiper@3 --save-dev

2、局部使用

<template>
  <div class="recommendPage">
    <swiper :options="swiperOption" ref="mySwiper">
      <swiper-slide>I'm Slide 1</swiper-slide>
      <swiper-slide>I'm Slide 2</swiper-slide>
      <swiper-slide>I'm Slide 3</swiper-slide>
      <swiper-slide>I'm Slide 4</swiper-slide>
      <div class="swiper-pagination" slot="pagination"></div>
      <div class="swiper-button-prev" slot="button-prev"></div>
      <div class="swiper-button-next" slot="button-next"></div>
    </swiper>
  </div>
</template>

<script>
// 引入插件
import { swiper, swiperSlide } from "vue-awesome-swiper";
import "swiper/dist/css/swiper.css";

export default {
  name: 'Home',
  components: {
    swiper,
    swiperSlide
  },
  data() {
    return {
      swiperOption: {
        loop: true,
        autoplay: {
          delay: 3000,
          stopOnLastSlide: false,
          disableOnInteraction: false
        },
        // 显示分页
        pagination: {
          el: ".swiper-pagination",
          clickable: true //允许分页点击跳转
        },
        // 设置点击箭头
        navigation: {
          nextEl: ".swiper-button-next",
          prevEl: ".swiper-button-prev"
        }
      }
    };
  },
  computed: {
    swiper() {
      return this.$refs.mySwiper.swiper;
    }
  },
  mounted() {
    // current swiper instance
    // 然后你就可以使用当前上下文内的swiper对象去做你想做的事了
    console.log("this is current swiper instance object", this.swiper);
    // this.swiper.slideTo(3, 1000, false);
  }
}
</script>

<style scoped>
  .recommendPage .swiper-container{
    position: relative;
    width: 100%;
    height: 200px;
    background: pink;
  }
  .recommendPage .swiper-container .swiper-slide{
    width: 100%;
    line-height: 200px;
    background: yellowgreen;
    color: #000;
    font-size: 16px;
    text-align: center;
  }
</style>

4.vue-awesome-swiper中使用animate

1、安装
npm install animate.css --save

2、下载animate.js包
打开链接： https://www.swiper.com.cn/download/index.html#file8，
下载“swiper.animate1.0.3.min.js”，
放到“assets/js/swiper.animate1.0.3.min.js”目录下
该文件需修改适应es6，
并添加代码行：
export {swiperAnimateCache,swiperAnimate};

3、main.js引入animate.js
import 'animate.css'

4、组件中使用

<template>
  <div class="recommendPage">
    <swiper :options="swiperOption" ref="mySwiper">
      <swiper-slide><div class="ani"
        swiper-animate-effect="bounceInDown"
         swiper-animate-duration="1s"
         swiper-animate-delay="0s">slide1</div></swiper-slide>
      <swiper-slide><div class="ani"
        swiper-animate-effect="bounceInDown"
         swiper-animate-duration="1s"
         swiper-animate-delay="0s">slide2</div></swiper-slide>
         
      <div class="swiper-pagination" slot="pagination"></div>
      <div class="swiper-button-prev" slot="button-prev"></div>
      <div class="swiper-button-next" slot="button-next"></div>
    </swiper>
  </div>
</template>

<script>
// 引入插件
import { swiper, swiperSlide } from "vue-awesome-swiper";
import "swiper/dist/css/swiper.css";
import {swiperAnimateCache,swiperAnimate} from "@/assets/js/swiper.animate1.0.3.min.js"

export default {
  name: 'Home',
  components: {
    swiper,
    swiperSlide
  },
  data() {
    return {
      swiperOption: {
        loop: true,
        autoplay: {
          delay: 3000,
          stopOnLastSlide: false,
          disableOnInteraction: false
        },
        // 显示分页
        pagination: {
          el: ".swiper-pagination",
          clickable: true //允许分页点击跳转
        },
        // 设置点击箭头
        navigation: {
          nextEl: ".swiper-button-next",
          prevEl: ".swiper-button-prev"
        },
        on:{
              init:function(){
                swiperAnimateCache(this);
                swiperAnimate(this);
              },
              slideChangeTransitionStart:function(){
              },
              slideChangeTransitionEnd:function(){
              },
              slideChange:function(){
                swiperAnimate(this);
              },
            },    
        }
    };
  },
  computed: {
    swiper() {
      return this.$refs.mySwiper.swiper;
    }
  },
  mounted() {
    // current swiper instance
    // 然后你就可以使用当前上下文内的swiper对象去做你想做的事了
    console.log("this is current swiper instance object", this.swiper);
    // this.swiper.slideTo(3, 1000, false);
  }
}
</script>

<style scoped>
  .recommendPage .swiper-container{
    position: relative;
    width: 100%;
    height: 200px;
    background: pink;
  }
  .recommendPage .swiper-container .swiper-slide{
    width: 100%;
    line-height: 200px;
    background: yellowgreen;
    color: #000;
    font-size: 16px;
    text-align: center;
  }
</style>