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

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引入并初始化

javascript 复制代码
import AOS from "aos";
import "@/node_modules/aos/dist/aos.css";
AOS.init({
  duration: 1000,          // 动画时长(毫秒)
  easing: 'ease-in-out',   // 缓动效果
  once: true,              // 是否仅触发一次
  disable: 'mobile'        // 在移动端禁用
});
相关推荐
小毛驴8509 分钟前
创建 Vue 项目的 4 种主流方式
前端·javascript·vue.js
誰能久伴不乏38 分钟前
Linux如何执行系统调用及高效执行系统调用:深入浅出的解析
java·服务器·前端
涔溪2 小时前
响应式前端设计:CSS 自适应布局与字体大小的最佳实践
前端·css
今禾2 小时前
前端开发中的Mock技术:深入理解vite-plugin-mock
前端·react.js·vite
你这个年龄怎么睡得着的2 小时前
Babel AST 魔法:Vite 插件如何让你的 try...catch 不再“裸奔”?
前端·javascript·vite
我想说一句2 小时前
掘金移动端React开发实践:从布局到样式优化的完整指南
前端·react.js·前端框架
jqq6662 小时前
Vue3脚手架实现(九、渲染typescript配置)
前端
码间舞2 小时前
Zustand 与 useSyncExternalStore:现代 React 状态管理的极简之道
前端·react.js
Dream耀2 小时前
提升React移动端开发效率:Vant组件库
前端·javascript·前端框架
冰菓Neko2 小时前
HTML 常用标签速查表
前端·html