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>