标签：style vue cli allBoxes awesome duration attributes animate swiper

我使用的时候一直报错，参考以下https://segmentfault.com/q/1010000009216803   有人改了swiper.animate.min.js文件解决

<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>

// swiper.animate.min.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, ' '))
  }
}

标签：style,vue,cli,allBoxes,awesome,duration,attributes,animate,swiper
来源： https://www.cnblogs.com/lude1994/p/12612617.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。