标签：Vue item animation css animate fadeInUp swiper

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

标签：Vue,item,animation,css,animate,fadeInUp,swiper
来源： https://www.cnblogs.com/yogurt-is-sweet/p/13934082.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。