基于vue的swiper动画轮播图

以前做轮播都是参照 https://www.swiper.com.cn/ 去做，

使用最多的是https://github.com/surmon-china/vue-awesome-swiper 这个插件但是，因为介绍不够详细经常性遇到各种问题，。

直到几天前我看到一个网址，忽然觉得以前解决问题的时间全部白花了。

https://surmon-china.github.io/vue-awesome-swiper/

这里边居然有各种轮播图对应的各种vue实现方式。

然后我发现一个问题 vue-awesome-swipe插件不像 swiper 一样支持 animate.css 动画，具体原因是swiper.animate.min.js 布支持npm 的引入方式，这样就简单了，那我们把这个文件进行封装不就好了，具体代码如下

/* eslint-disable */
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, ' '))
  }
}

文件百度云盘自取

链接：https://pan.baidu.com/s/1NnFGGuAg4XW8H4DdMFzifQ 
提取码：8xg2 
 

使用方法

第一步：

第二步：

第三步：

嗯嗯，就是这样。