vue swiper中使用animate.css

需要的插件

• npm install animate.css --save文档所在

• npm install swiper vue-awesome-swiper --save

• 使用说明

  • 利用animate.css的自定义类名使用方法,配合当前选中swiper类名,达到给只给当前选中swiperside中的标签添加动画的效果

  • 在这里我使用了样式穿透,因为是创建的vue项目

• 一些小问题

  • 这两个样式必须同时存在,顺序也不能改变,animation是简写的动画样式,具体自己查一下,细心就可以避免

 animation: bounceInLeft;
 animation-duration: 2s;

使用示例

<swiper ref="mySwiper" :options="swiperOptions">
      <swiper-slide>
        <h1 class="bounce">An animated element</h1>
      </swiper-slide>
      <swiper-slide>
        <h1 class="flash">An animated element</h1>
      </swiper-slide>
      <swiper-slide>
        <h1 class="bounceInLeft">An animated element</h1>
      </swiper-slide>
      <swiper-slide>
        <h1 class="shakeY">shakeY</h1>
      </swiper-slide>
      <swiper-slide>
        <h1 class="flash">An animated element</h1>
      </swiper-slide>
    </swiper>
// swiper配置
swiperOptions: {
          direction: 'vertical',
          loop: true,
          autoplay: {
            disableOnInteraction: false,
          }
        }

// css样式
 ::v-deep .swiper-container {
    width: 100%;
    height: 100vh;

    .swiper-slide-active {

      .bounce {
        animation: bounce;
        animation-duration: 2s;

      }

      .shakeY {
        animation: shakeY;
        animation-duration: 2s;
      }

      .flash {
        animation: flash;
        animation-duration: 2s;
      }

      .bounceInLeft {
        animation: bounceInLeft;
        animation-duration: 2s;
      }
    }

   
  }