组件或元素的滚动动画 – Vue Aos

组件或元素的滚动动画 – Vue Aos
插件名称 vue-aos
发布时间 2021年10月26日
插件作者 Se7en-IT

一个 Vue.js 库,可将 Animate On Scroll 应用于应用程序中的组件或元素。

安装和下载:

# Yarn
$ yarn add vue-aos

# NPM
$ npm i vue-aos

使用:

1、安装注册vue-aos。

import Vue from 'vue'
import * as VueAos from 'vue-aos'
Vue.use(VueAos)

2. 将其用作组件。

<template>
  <vue-aos animation-class="myAnimationClass">
    <div>{{ msg }}</div>
  </vue-aos>
</template>

3. 或作为指令。

<div v-vue-aos="{animationClass:'myAnimationClass'}">
  {{ msg }}
</div>

4.可用道具。

threshold: {
  type: Number,
  default: 0.5
},
root: {
  type: HTMLElement,
  default: () => null
},
rootMargin: {
  type: String,
  default: () => '0px 0px 0px 0px'
},
animationClass: {
  type: String
},
visibility: {
  type: String,
  default: 'hidden'
}

5. 事件.

  • @animationstart(IntersectionObserverEntry):动画开始时触发
  • @animationend(IntersectionObserverEntry): 动画结束时触发的事件