java中aos是什么_vue中使用aos动画

安装AOS

npm install aos --save

引入

main.js中引入

import AOS from 'aos'

import 'aos/dist/aos.css'

初始化

AOS.init();

基本用法

要使用aos动画库，你需要做的就是在需要动画的元素上添加aos属性，例如：

aos脚本将会在页面滚动时，在该元素上触发相应的动画。

AOS常用动画

淡入淡出动画:

fade-up

fade-down

fade-left

fade-right

fade-up-right

fade-up-left

fade-down-right

fade-down-left

翻转动画:

flip-up

flip-down

flip-left

flip-right

滑动动画:

slide-up

slide-down

slide-left

slide-right

缩放动画:

zoom-in

zoom-in-up

zoom-in-down

zoom-in-left

zoom-in-right

zoom-out

zoom-out-up

zoom-out-down

zoom-out-left

zoom-out-right

锚位置:

top-bottom