vue引入aos.js实现滚动动画

aos.js官方网站:http://michalsnik.github.io/aos/
aos.js介绍
AOS (Animate on Scroll) 是一个轻量级的JavaScript库,用于实现当页面元素随着用户滚动进入可视区域时触发动画效果。它不需要依赖 jQuery,可以很容易地与各种Web开发框架(如Vue、React等)集成。AOS提供了多种动画类型和可定制的设置,比如动画延迟、持续时间、动画类型(淡入、滑动、弹跳等)以及方向控制,使得网页在滚动时能够展现出平滑而吸引人的动态效果,提升用户体验。

特点包括:

1.零依赖:不依赖其他库,直接使用原生JavaScript编写。
2.易于安装和配置:通过npm安装或直接使用CDN链接快速集成到项目中。
3.多样化动画:支持多种CSS3动画效果。
4.自动管理状态:元素在滚动到可视区域时播放动画,向上滚动时可选择恢复到初始状态。
5.响应式设计:支持根据屏幕尺寸调整动画触发条件。
6.使用AOS,开发者只需要在HTML元素上添加特定的类名,并通过JavaScript初始化AOS,即可实现平滑的滚动动画效果。
效果

vue使用aosjs实现滚动动画

1.下载

安装aos.js
npm install aos --save

2.在main.js文件中引入并初始化
在这里插入图片描述

/* 引入aos动画库相关文件 */
import AOS from 'aos'
import 'aos/dist/aos.css'/* aos动画初始化 */
AOS.init({duration: 1000,easing:"ease-in-out-back"
});

3.在页面使用

<divdata-aos="fade-up"data-aos-anchor-placement="center-bottom"data-aos-delay="300"style="width: 300px;height: 300px;background-color: blanchedalmond;margin-top: 300px;">1111</div>

属性说明

属性属性说明属性值默认值
aos动画效果名称fade-upnull
aos-offset可视区域前距离触发动画200px120px
aos-duration持续动画时间(范围从50-3000毫秒)600400
aos-easing动画处理的定时功能(linear,ease-in-out,ease-out-quart)ease-in-outease
aos-delay动画的延迟时间3000
aos-anchor锚元素。偏移触发动画#selectornull
aos-anchor-placement锚位置,元素位于屏幕底部位置时触发动画(范围top-bottom , top-center,top-top)top-centertop-bottom
aos-once是否每次上下滚动都会触发,默认触发一次truefalse

注意点:

  1. 在你的Vue模板中,为希望应用动画效果的元素添加AOS指定的类名,如data-aos=“fade-up”
  2. 确保AOS只被初始化一次,尤其是在使用路由切换的单页应用中,可以通过在Vue Router的导航守卫中判断是否需要重新初始化AOS
  3. 对于长列表或复杂页面,频繁的动画可能会对性能有影响。可以利用AOS的once选项让动画只执行一次,或者使用disable方法在不需要动画时禁用AOS。
  4. 利用AOS的responsive选项来根据屏幕尺寸调整动画的行为,确保在不同设备上都有良好的用户体验。
  5. 使用npm或yarn安装AOS:npm install aos --save 或 yarn add aos。
  6. 如果你是在某个特定组件中使用AOS,需要在那个组件内导入AOS: import AOS from ‘aos’;
  7. 在Vue的生命周期钩子中初始化AOS,通常在mounted()钩子中调用AOS.init()来确保DOM已经渲染完成:

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/bicheng/29527.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

MikroTik RouterOS 授权签名验证分析

MikroTik 软路由 百科https://baike.baidu.com/item/mikrotik/9776775官网https://mikrotik.com/ 授权文件分析 -----BEGIN MIKROTIK SOFTWARE KEY------------ mr3jH5qhn9irtF53ZICFTN7Tk7wIx7ZkxdAxJ19ydASY ShhFteHMntBTyaS8wuNdIJJPidJxbuNPLTvCsv7zLA …

Python 字典的哈希机制是如何工作的,它对性能有什么影响?

Python 字典的哈希机制是其能够提供快速查找能力的关键。以下是字典哈希机制的工作原理以及它对性能的影响&#xff1a; 哈希机制的工作原理&#xff1a; 哈希函数&#xff1a; 字典使用内置的哈希函数来为每个键生成一个哈希值。这个哈希值是基于键的值计算出来的&#xff0c…

STM32学习笔记(八)--DMA直接存储器存取详解

&#xff08;1&#xff09;配置步骤1.配置RCC外设时钟 开启DMA外设2.初始化DMA外设 调用DMA_Init 外设存储器站点的起始地址 数据宽度 地址是否自增 方向 传输计数器 是否需要自动重装 选择触发源 通道优先级3.开启DMA控制 4.开启触发信号输出&#xff08;如果需要硬件触发&…

在线报表设计器 ,FastReport Online Designer 2024.2新版本(下)

在上篇文章《在线报表设计器 &#xff0c;FastReport Online Designer 2024.2新版本&#xff08;上&#xff09; 》中&#xff0c;我们已经介绍了部分在线设计器的新功能&#xff0c;这部分将继续为大家介绍其他新功能&#xff0c;欢迎查阅~ 报告设计器中的功能进行了大规模更…

哨兵机制(Redis Sentinel)常见面试题

一、什么是哨兵机制 哨兵机制&#xff08;Redis Sentinel&#xff09;是redis主从集群中实现主从库自动切换的关键机制。它通过监控、选主和通知三个任务来实现主从库的自动切换。在监控任务中&#xff0c;哨兵周期性地检测主从库的在线状态&#xff0c;判断主库是否处于下线状…

对input输入框的正则限制

一、0-100的整数 正则&#xff1a; const inputRules ref([{required: false,trigger: "blur",validator: (rule, value, callback) > {const reg /^[0-9]$/; // 只允许整数if ((0 < value && value < 100 && reg.test(value)) ||valu…

AI时代的数据治理:挑战与策略

随着人工智能&#xff08;AI&#xff09;技术的突飞猛进&#xff0c;我们已迈进智能时代的大门。在这个新时代里&#xff0c;数据无疑成为推动AI创新与进步的核心力量。然而&#xff0c;与此同时&#xff0c;数据治理的紧迫性也日益凸显&#xff0c;它成为确保AI系统有效、公正…

Mybatis动态SQL语句总结

Mybatis动态SQL语句总结 大家好&#xff0c;我是免费搭建查券返利机器人省钱赚佣金就用微赚淘客系统3.0的小编&#xff0c;也是冬天不穿秋裤&#xff0c;天冷也要风度的程序猿&#xff01; 1. Mybatis简介 Mybatis是一个优秀的持久层框架&#xff0c;它简化了与数据库的交互过…

连接池中最大的活动连接数 max-active 的作用及含义

max-active 的作用&#xff1a; 作用&#xff1a; max-active是连接池中最大的活动连接数&#xff0c;其作用是防止一次性占用过多的连接资源&#xff0c;导致系统性能下降。 学习内容&#xff1a; 内容 数据库连接配置文件中个参数的含义&#xff1a; &#xff08;1&#x…

【STM32】GPIO简介

1.GPIO简介 GPIO是通用输入输出端口的简称&#xff0c;简单来说就是STM32可控制的引脚&#xff0c;STM32芯片的GPIO引脚与外部设备连接起来&#xff0c;从而实现与外部通讯、控制以及数据采集的功能。 STM32芯片的GPIO被分成很多组&#xff0c;每组有16个引脚。 最基本的输出…

SQL聚合函数---汇总数据

此篇文章内容均来自与mysql必知必会教材&#xff0c;后期有衍生会继续更新、补充知识体系结构 文章目录 SQL聚集函数表&#xff1a;AGV()count()根据需求可以进行组合处理 max()min()max&#xff08;&#xff09;、min&#xff08;&#xff09;、avg&#xff08;&#xff09;组…

python爬虫 -爬取 json 格式数据

在Python中&#xff0c;爬取JSON格式的数据通常涉及到发送 HTTP请求到某个URL&#xff0c;并解析返回的JSON数据。以下是一个简单的示例&#xff0c;说明如何使用Python的requests库来爬取JSON格式的数据&#xff1a; 1. 首先&#xff0c;确保你已经安装了requests库。如果没…

PostgreSQL源码分析——绑定变量

这里分析一下函数中应用绑定变量的问题&#xff0c;但实际应用场景中&#xff0c;不推荐这么使用。 prepare divplan2(int,int) as select div($1,$2); execute divplan2(4,2);语法解析 分别分析prepare语句以及execute语句。 gram.y中定义 /******************************…

奔驰EQS SUV升级增强现实AR抬头显示HUD香氛系统

增强AR实景抬头显示HUD&#xff08;Augmented Reality Head-Up Display&#xff09;是一种更高级的驾驶辅助技术&#xff0c;相比于普通抬头显示HUD&#xff0c;它提供了更丰富、更具沉浸感的驾驶体验。以下是它比普通抬头显示HUD多的一些功能&#xff1a; • 信息呈现方式&am…

RFID期末复习 | 防碰撞算法 | 信源编码 | 差错控制 | 系统调制 | S50卡 | 无源标签 | 工作频率 | 自动识别

防碰撞算法 ALOHA算法 ALOHA算法是一种随机接入方法&#xff0c;其基本思想是采取标签先发言的方式&#xff0c;当标签进入读写器的识别区域内时就自动向读写器发送其自身的ID号&#xff0c;在标签发送数据的过程中&#xff0c;若有其他标签也在发送数据&#xff0c;将会发生…

【K8s】专题五(4):Kubernetes 配置之 ConfigMap 与 Secret 使用

以下内容均来自个人笔记并重新梳理&#xff0c;如有错误欢迎指正&#xff01;如果对您有帮助&#xff0c;烦请点赞、关注、转发&#xff01;欢迎扫码关注个人公众号&#xff01; 目录 一、ConfigMap 使用方式 1、注入环境变量 2、挂载配置文件 二、Secret 使用方式 1、注入…

03- jQuery事件处理和动画效果

1. jQuery的事件处理 1.1 绑定事件处理函数 on() 将一个或多个事件的处理方法绑定到被选择的元素上。on()方法适用于当前或未来的元素&#xff0c;如用脚本创建的新元素。 $(selector).on(event,childSelector,data,function) 参数描述event必需。规定要从被选元素添加的一…

计算机毕业设计Python+Flask弹幕情感分析 B站视频数据可视化 B站爬虫 机器学习 深度学习 人工智能 NLP文本分类 数据可视化 大数据毕业设计

首先安装需要的python库&#xff0c; 安装完之后利用navicat导入数据库文件bili100.sql到mysql中&#xff0c; 再在pycharm编译器中连接mysql数据库&#xff0c;并在设置文件中将密码修改成你的数据库密码。最后运行app.py&#xff0c;打开链接&#xff0c;即可运行。 B站爬虫数…

大学物理实验分析

终于整理完了 测量误差分类 天平未校准引起的误差 天平设计、制造、使用或环境因素引起偏差属于系统误差应定期校准天平 游标卡尺测量物体长度 读取主尺整毫米数读取副尺小数部分相加得出测量结果记录测量结果时保留适当小数位数可通过多次测量取平均值提高精确度注明单位…

防泄密解决方案

防泄密解决方案是一个系统性的策略&#xff0c;旨在保护敏感信息不被非法获取、泄露或滥用。以下是一个结构清晰、分点表示的防泄密解决方案&#xff0c;结合了参考文章中的关键信息和建议&#xff1a; 一、策略制定与政策明确 明确数据分类&#xff1a;将数据分为公开、内部…