当前位置: 首页 > article >正文

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

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

http://www.lryc.cn/news/2404926.html

相关文章:

  • 十(1). 强制类型转换
  • 从npm库 Vue 组件到独立SDK:打包与 CDN 引入的最佳实践
  • rknn优化教程(一)
  • uniapp Vue2 获取电量的独家方法:绕过官方插件限制
  • 【统计方法】树模型,ensemble,bagging, boosting
  • 【选配电脑】CPU核显工作机控制预算5000
  • Mysql 插入中文乱码
  • UserAgent包名识别工具
  • 96.如何使用C#实现串口发送? C#例子
  • 【工具使用】STM32CubeMX-FreeRTOS操作系统-信号标志、互斥锁、信号量篇
  • [P2P]并发模式
  • Cloudflare 免费域名邮箱 支持 Catch-all 无限别名收件
  • 大数据Spark(六十一):Spark基于Standalone提交任务流程
  • 学习记录:DAY32
  • next,react封装axios,http请求
  • 元图CAD:一键解锁PDF转CAD,OCR技术赋能高效转换
  • Android 平台RTSP/RTMP播放器SDK接入说明
  • Nodejs工程化实践:构建高性能前后端交互系统
  • STM32什么是寄存器
  • Linux 的 find 命令使用指南
  • 第六个微信小程序:教师工具集
  • 记录一个用了很久的git提交到github和gitee比较方便的方法
  • Qt Qml模块功能及功能解析
  • 前端八股之JS的原型链
  • NLP学习路线图(二十九):BERT及其变体
  • 机器翻译模型笔记
  • Ref vs. Reactive:Vue 3 响应式变量的最佳选择指南
  • 让视觉基础模型(VFMs)像大语言模型(LLMs)一样“会思考”​
  • 现代前端框架的发展与演进
  • 【LLM-Agent】智能体的记忆缓存设计