1、通過cnpm安裝animate.css

cnpm install animate.css --save

2、在main.js引入

import animated from 'animate.css'
Vue.use(animated)

如沒有安裝淘寶映象，使用npm下載

3、swiper.js和animate.css一起使用

<swiper class="swiper" :options="swiperOption">
<swiper-slide v-for='(item,key) in swiperCon' :key='key'>
<div class
 
="swiper-text animate fadeInUp">
<h1>{{item.title}}</h1>
<p>{{item.name}}</p>
<h3>{{item.slotted}}</h3>
<h3>{{item.screwdriver}}</h3>
</div>
</div>
<div class="swiper-right animate m-fadeInDown">
<img :src="item.imgUrl4" alt="">
</
 
div>
</swiper-slide>
<div class="swiper-pagination" slot="pagination"></div>
</swiper>

/* swiper 動畫 */
.swiper-slide-active .animate {
animation-duration: 2s;
animation-fill-mode: both;
-webkit-animation-duration: 2s;
-webkit-animation-fill-mode: both;
}

/* 這裡面更改動畫名稱 */
.swiper-slide-active .fadeInUp
 
{
-webkit-animation-name: fadeInUp;
animation-name: fadeInUp;
}