AOS(Animate on scroll)是小型动画滚动库,可在页面滚动时给元素添加动画效果。CSS3 驱动,效果类似于 WOWJS。

npm install aos --save

.vue文件引入

import AOS from 'aos'

初始化
mounted() {
	// 在项目加载完成之后初始化wow
	this.$nextTick(() => {
		AOS.init({
			offset: 10,
			duration: 600,
			easing: 'ease-in-sine',
			delay: 100
		})
	})
},

view 布局

<div class="hbiCard aos-init aos-animate" data-aos="flip-left" data-aos-delay="300">
	.......
</div>

By lxcss

发表评论

您的电子邮箱地址不会被公开。 必填项已用*标注