Vue安装animate.css和在Swiper中使用

最新推荐文章于 2025-03-15 13:04:21 发布

酸奶(●'◡'●)

最新推荐文章于 2025-03-15 13:04:21 发布

阅读量376

点赞数

文章标签： vue npm

本文链接：https://blog.youkuaiyun.com/employerboos/article/details/109519248

版权

本文介绍了如何在Vue项目中通过cnpm安装animate.css，并在main.js中引入。接着详细讲解了如何将animate.css与swiper.js结合，实现更丰富的滑动效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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