vue cli使用vue-awesome-swiper动画

<template>
<div class="culture">
  <swiper :options="swiperOption" ref="mySwiper">
    <!-- slides -->
    <swiper-slide>
      <div class="title ani" swiper-animate-effect="slideInLeft" swiper-animate-duration="2s">11111</div>
      <div class="text ani" swiper-animate-effect="slideInLeft" swiper-animate-duration="2s">111111</div>
      <div class="pics ani" swiper-animate-effect="slideInLeft" swiper-animate-duration="2s">1111111</div>
    </swiper-slide>
    <swiper-slide>
      <div class="title ani" swiper-animate-effect="slideInRight" swiper-animate-duration="2s">222222</div>
      <div class="text ani" swiper-animate-effect="slideInRight" swiper-animate-duration="2s">222222</div>
      <div class="pics ani" swiper-animate-effect="slideInRight" swiper-animate-duration="2s">222222</div>
    </swiper-slide>
    <swiper-slide>
      <div class="title ani" swiper-animate-effect="zoomIn" swiper-animate-duration="2s">3333333</div>
      <div class="text ani" swiper-animate-effect="zoomIn" swiper-animate-duration="2s">3333333</div>
      <div class="pics ani" swiper-animate-effect="zoomIn" swiper-animate-duration="2s">3333333</div>
    </swiper-slide>
  </swiper>
</div>
</template>

<script>
import * as swiperAni from ‘@/common/js/swiper.animate.min.js‘

export default {
  name: ‘culture‘,
  data() {
    return {
      swiperOption: {
        // loop: true,
        effect: ‘fade‘,
        // 变手势
        grabCursor: true,
        initialSlide: 0,
        // 滑动方向，水平horizontal，垂直vertical
        direction: ‘vertical‘,
        on: {
          init: function () {
            swiperAni.swiperAnimateCache(this)
            swiperAni.swiperAnimate(this)
          },
          slideChange: function () {
            swiperAni.swiperAnimate(this)
          }
        }
      }
    }
  },
  computed: {
    swiper() {
      return this.$refs.mySwiper.swiper
    }
  }
}
</script>

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, ‘ ‘))
  }
}