这是Vue.js指令,用于使用Animate.css动画对滚动元素进行动画处理。
# Yarn
$ yarn add vue-animate-onscroll
# NPM
$ npm install vue-animate-onscroll --save
1.安装,导入和注册指令。
import VueAnimateOnScroll from 'vue-animate-onscroll'
Vue.use(VueAnimateOnScroll)
2.在文档中加载最新的Animate.css库。
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/animate.css@latest/animate.min.css"/>
3.在元素滚动到视图中时对其进行动画处理。
<div v-animate-onscroll="'animated flash'">
让我动起来
</div>
4.确定是否重复动画。
<div v-animate-onscroll.repeat="'animated flash'">
让我动起来
</div>
5.根据滚动方向确定动画。
<div v-animate-onscroll="{down: 'animated flash', up: 'animated rotateOut' }">
让我动起来
</div>