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