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

   
  }