vue使用vue-awesome-swiper插件结合animate.css

中文教程：https://www.swiper.com.cn/api/parameters/21.html

 

Swiper Animate使用方法：https://www.swiper.com.cn/usage/animate/index.html

 

在前端使用swiper很多人都能想到使用swpier(网址： https://www.swiper.com.cn/)， swiper能兼容很多不同的项目，如vue、react、原声html等。当你使用swipe时会发现每次使用都需要创建一个swiper对象，因此vue的生态系统中封装了vue-awesome-swiper插件，具体使用如下：

1、下载vue-awesome-swiper插件

npm install vue-awesome-swiper --save-dev

2、在main.js中引入

3、页面使用

首先是一个<swiper></swiper>标签，在swiper标签里面是定义的多少个<swiper-slide>页，一个滑页是一个是、slide。

看上去是不是比swiper容易多了呢哈哈哈哈哈哈，所有设置的swiper属性都设置在swiperOption属性中，这些属性和swiper官网一样

 

下面是一个坑

加入在页面你想实现一个动态效果，百度一下可以发现比较火的css动态插件是animate.css，网址： https://daneden.github.io/animate.css/

在vue项目中使用这个css插件操作如下

1、下载插件包： npm install animate.css --save

2、在main.js中引入

3、页面引用

运行项目之后你会发现很多想要的一下动画参数并不能设置，例如动画执行时间啦，延迟时间等，并且你在结合了swiper时也会发现只有第一个swiper-slide中的动起气作用了。主要原因是页面一开始时触发了动画执行，其他的slide并没有触发，主要解决如下：

1、下载animate.js包

打开链接： https://www.swiper.com.cn/download/index.html#file8

选择此js进行下载

接下来就是怎么使用

1、把此ls放入vue的项目中，为了规范vue把静态文件存放在static中，在此文件夹下建立js文件夹把js丢进去

2、在main.js中引入

3、啦啦啦啦页面使用来了

接下来就是在opition里面设置属性on属性

 

链接：https://blog.csdn.net/qq_41227106/article/details/101052915

 

我使用的时候一直报错，参考以下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, ' '))
  }
}

　　链接：https://www.cnblogs.com/lude1994/p/12612617.html

https://segmentfault.com/q/1010000009216803