使用Animate.css滚动播放动画

使用Animate.css滚动播放动画

插件名称:animate-onscroll

发布时间:2020年4月10日

插件作者:vycoder

官网 演示 GitHub下载

这是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>
相关插件