当前位置：首页 > news >正文

Vue---vue使用AOS(滚动动画)库

news 来源：原创 2025/6/6 9:16:18

AOS介绍

aos.js是一个轻量级的动画库插件,可以简单的实现页面滚动触发动画效果,可以让我们网页看起来更加生动(高大上)

官网演示地址:aos.js

安装

YARN, NPM, BOWER安装

yarn add aos

npm install aos --save

bower install aos --save

CDN引入

<link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">

<script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>

初始化

<script>AOS.init();
</script>

配置项参考

fade: 元素逐渐显现或消失。
fade-up: 元素向上滚动并逐渐显现。
fade-up-right: 元素向右上方滚动并逐渐显现。
fade-up-left: 元素向左上方滚动并逐渐显现。
fade-down: 元素向下滚动并逐渐显现。
fade-down-right: 元素向右下方滚动并逐渐显现。
fade-down-left: 元素向左下方滚动并逐渐显现。
fade-left: 元素向左滚动并逐渐显现。
fade-right: 元素向右滚动并逐渐显现。
flip-up: 元素向上翻转并逐渐显现。
flip-down: 元素向下翻转并逐渐显现。
flip-left: 元素向左翻转并逐渐显现。
flip-right: 元素向右翻转并逐渐显现。
zoom-in: 元素逐渐放大。
zoom-out: 元素逐渐缩小。
rotate: 元素逐渐旋转。
slide-up: 元素向上滑动并逐渐显现。
slide-down: 元素向下滑动并逐渐显现。
slide-left: 元素向左滑动并逐渐显现。
slide-right: 元素向右滑动并逐渐显现。

Vue中使用

npm安装

npm install aos --save

main.js引入并初始化

import AOS from "aos";
import "@/node_modules/aos/dist/aos.css";
AOS.init({duration: 1000,          // 动画时长（毫秒）easing: 'ease-in-out',   // 缓动效果once: true,              // 是否仅触发一次disable: 'mobile'        // 在移动端禁用
});