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

vue3 滚动条滑动到元素位置时,元素加载

水个文

效果

要实现的思路就是,使用IntersectionObserver 检测元素是否在视口中显示,然后在通过css来进行动画载入。

1.监控元素是否视口中显示

      const observer = new IntersectionObserver((entries) => {entries.forEach((entry) => {if (entry.isIntersecting) {acc.value = true}});});//监控元素observer.observe(slideInAnimation.value);

        其中 if里就是当元素显示在视口中要执行的逻辑 

        然后在调用,在里面要传入要监控元素的元素对象,这里要在onmounted里调用,注意异步

    onMounted(() => {//监控元素observer.observe(slideInAnimation.value);});

2.设置css

.box {overflow: hidden;height: 4000px;/* 为了演示效果,设置一个高度 */display: flex;justify-content: center;align-items: center;
}.slide-in-animation,
.onslide-in-animation {width: 400px;height: 200px;
}  //定义一个基础的数据,.slide-in-animation {  //这个是要载入时,将css替换即可background-color: #f00;position: relative;animation: slide-in 4s forwards; //持续时间
}@keyframes slide-in { //定义加载方式0% {visibility: hidden; //当百分0时元素不显示,从最右边加载,left: 100%;}100% { left: 0%;  //百分百时加载到最左边}
}

大概是这个个逻辑,然后通过三目运算来控制class的值

  <div class="box"><div :class="acc ? 'slide-in-animation' : 'onslide-in-animation'" ref="slideInAnimation"><img src="https://www.gm.com/assets/%E5%8D%81%E5%9B%9B%E6%9C%9F-CKW22HE9.png" alt=""style="width:400px;height:200px;"></div></div>

acc最开始是false,不显示,而当元素在视口里时,将slide-in-animation类名加入,执行动画,然后实现滑动到元素位置时元素滑动载入,这里我只是做了一个示例,通过  @keyframes 可以实现更复杂的效果

源码

<template><div class="box"><div :class="acc ? 'slide-in-animation' : 'onslide-in-animation'" ref="slideInAnimation"><img src="https://www.gm.com/assets/%E5%8D%81%E5%9B%9B%E6%9C%9F-CKW22HE9.png" alt=""style="width:400px;height:200px;"></div></div>
</template><script>
import { defineComponent, ref, onMounted } from 'vue';export default defineComponent({setup() {const slideInAnimation = ref(null);const observer = new IntersectionObserver((entries) => {entries.forEach((entry) => {if (entry.isIntersecting) {acc.value = true}});});onMounted(() => {//监控元素observer.observe(slideInAnimation.value);});const acc = ref(false)return {slideInAnimation, acc};}
});
</script><style scoped>
.box {overflow: hidden;height: 4000px;/* 为了演示效果,设置一个高度 */display: flex;justify-content: center;align-items: center;
}.slide-in-animation,
.onslide-in-animation {width: 400px;height: 200px;}.slide-in-animation {background-color: #f00;position: relative;animation: slide-in 4s forwards;
}@keyframes slide-in {0% {visibility: hidden;left: 100%;}100% {left: 0%;}
}
</style>

相关文章:

vue3 滚动条滑动到元素位置时,元素加载

水个文 效果 要实现的思路就是&#xff0c;使用IntersectionObserver 检测元素是否在视口中显示&#xff0c;然后在通过css来进行动画载入。 1.监控元素是否视口中显示 const observer new IntersectionObserver((entries) > {entries.forEach((entry) > {if (entry.i…...

[Linux] 相对路径(Relative Path)与绝对路径(Absolute Path)

说明&#xff1a; 在编写shell脚本来管理系统或其他一般情况时&#xff0c;推荐使用绝对路径。因为在某些时候工作的环境或文件管理时发生变化可能导致某些绝对路径是有冲突的&#xff0c;这会产生一些问题。 比如在清华大学的第一教学楼里面有一个机器人实验室&#xff0c;文件…...

[ESP32] I2S播放wav文件

//代码&#xff1a;循环播放4首内置的wav音乐&#xff0c;I2S连接d类功放用NS4168芯片 //文件取样格式&#xff1a;Wave PCM 签字的 16bit, 采样频率:16KHz ,比特率705kbps //demo工程打包下载&#xff1a;https://download.csdn.net/download/wabil/89515015 #include <…...

YOLOv8

YOLOv8 设计快速、准确且易于使用&#xff0c;使其成为各种物体检测与跟踪、实例分割、图像分类和姿态估计任务的绝佳选择框架 1.安装YOLOv8 创建虚拟环境 conda create --name ros2 python3.10 激活虚拟环境 conda activate ros2 安装组件 pip install ultralytics -i h…...

协程调度模块

什么是协程和协程调度&#xff1f; 基本概念 协程 协程是一种比线程更轻量级的并发编程结构&#xff0c;它允许在函数执行过程中暂停和恢复执行状态&#xff0c;从而实现非阻塞式编程。协程又被称为用户级线程&#xff0c;这是由于协程包括上下文切换在内的全部执行逻辑都是…...

2024 最新docker仓库镜像,6月,7月

目前下面的docker仓库镜像源还能使用。 vi /etc/docker/daemon.json添加如下配置{"registry-mirrors": ["https://hub.uuuadc.top", "https://docker.anyhub.us.kg", "https://dockerhub.jobcher.com", "https://dockerhub.icu&…...

探索Vim的文本处理能力:精通查找与替换

探索Vim的文本处理能力&#xff1a;精通查找与替换 Vim&#xff0c;作为Linux终端下的王牌文本编辑器&#xff0c;以其强大的功能和灵活性深受开发者和系统管理员的喜爱。在Vim中进行查找和替换是文本编辑中的一项基础且重要的操作。本文将详细解释如何在Vim中执行查找和替换文…...

2024.7.4学习日报

1、ppt前三章 5日计划 1、至少做到实验 2、java...

享元模式(Flyweight Pattern)

享元模式&#xff08;Flyweight Pattern&#xff09; 定义 享元模式通过共享技术来支持大量细粒度的对象&#xff0c;以减少内存中的对象数量。其核心思想是将对象的状态分为内部状态和外部状态&#xff0c;内部状态是不变的&#xff0c;可以被多个对象共享&#xff1b;外部状…...

Oracle连接mysql

oracle使用的11g&#xff0c;在一台windows服务器&#xff1b;mysql使用的是5.7版本&#xff0c;在另一台windows服务器&#xff0c;这两个服务器之间的网络是互通的。做BI时&#xff0c;要获取不同数据源的数据&#xff0c;这些数据源可能是Oracle&#xff0c;也可能是sqlserv…...

golang 垃圾回收

gc不回收什么 GC 不负责回收栈中的内存栈是一块专用内存&#xff0c;专门为了函数执行而准备的&#xff0c;存储着函数中的局部变量以及调用栈栈中的数据可以通过简单的编译器指令自动清理&#xff0c;也就不需要通过 GC 来回收了 垃圾回收算法 主流的两类垃圾回收算法有两种&a…...

React 中如何使用 Monaco

Monaco 是微软开源的一个编辑器&#xff0c;VSCode 也是基于 Monaco 进行开发的。如果在 React 中如何使用 Monaco&#xff0c;本文将介绍如何在 React 中引入 Monaco。 安装 React 依赖 yarn add react-app-rewired --dev yarn add monaco-editor-webpack-plugin --dev yarn…...

开源RAG个人知识库项目开发分析

前言 Hello&#xff0c;大家好&#xff0c;我是GISer Liu&#x1f601;&#xff0c;一名热爱AI技术的GIS开发者&#xff0c;这个LLM开发基础阶段已经进入尾声了&#xff0c;本文中我们不介绍更多的理论与知识点&#xff0c;而是通过的分析开源项目的解决方案来帮助各位开发者理…...

事务底层与高可用原理

1.事务底层与高可用原理 事务的基础知识 mysql的事务分为显式事务和隐式事务 默认的事务是隐式事务 显式事务由我们自己控制事务的开启&#xff0c;提交&#xff0c;回滚等操作 show variables like autocommit; 事务基本语法 事务开始 1、begin 2、START TRANSACTION&…...

树状数组基础知识

lowbit: lowbit(x)x&(-x) 树状数组&#xff1a; 树状数组的功能&#xff1a; 数组 在O(1)的时间复杂度实现单点加&#xff1a; 在O(lng n)的时间复杂度实现查询前缀和&#xff1a; 树状数组的定义&#xff1a; 查询前x项的和操作&#xff1a; ll query(int x){ll s0;f…...

【3分钟准备前端面试】vue3

目录 Vue3比vue2有什么优势vue3升级了哪些重要功能生命周期变化Options APIComposition APIreftoRef和toRefstoReftoRefsHooks (代码复用)Vue3 script setupsetupdefineProps和defineEmitsdefineExposeVue3比vue2有什么优势 性能更好体积更小更好的TS支持更好的代码组织更好的逻…...

【数据采集】亮数据浏览器、亮网络解锁器实战指南

前言 继上次我们写了数据采集与AI分析&#xff0c;亮数据通义千问助力跨境电商前行的文章之后&#xff0c;好多小伙伴来后台留言&#xff0c;表示对亮数据的数据采集非常感兴趣&#xff0c;并且感觉用起来非常顺手&#xff0c;大大减少了小白用户获取数据的成本。 在这儿&…...

暑期编程预习指南

暑期编程预习指南 高考结束后&#xff0c;迎来的是一段难得的假期时光。对于那些有志于踏入IT领域的高考生来说&#xff0c;这段时间无疑是一个重要的起点。为了帮助你们更好地利用这个假期&#xff0c;为未来的学习和职业生涯打下坚实的基础&#xff0c;特此提供一份编程预习…...

将带有 商店idr 商品信息的json导入到mongodb后,能不能根据商店id把所有商品全部提取并转为电子表格

当您已经将包含商店ID&#xff08;如realMallId&#xff09;的商品信息导入MongoDB后&#xff0c;确实可以轻松地根据商店ID提取所有相关商品信息并转换为电子表格&#xff08;例如Excel&#xff09;。这里是一个简化的流程&#xff0c;使用Python的pymongo库来查询MongoDB&…...

深入解析 androidx.databinding.BaseObservable

在现代 Android 开发中&#xff0c;数据绑定 (Data Binding) 是一个重要的技术&#xff0c;它简化了 UI 和数据之间的交互。在数据绑定框架中&#xff0c;androidx.databinding.BaseObservable 是一个关键类&#xff0c;用于实现可观察的数据模型。本文将详细介绍 BaseObservab…...

美团外卖mtgsig与waimai_sign双层签名逆向解析

1. 这不是“爬虫教程”&#xff0c;而是一份反向工程现场笔记你搜到这篇内容&#xff0c;大概率正卡在某个调试窗口前&#xff1a;抓包看到mtgsig和waimai_sign两个参数像两堵墙&#xff0c;无论怎么改请求头、换UA、清缓存&#xff0c;返回永远是{"code":403,"…...

【与我学 ClaudeCode】协作篇 之 Worktree + Task Isolation :目录隔离的并行执行通道

作者&#xff1a;逆境不可逃 技术永无止境 希望我的内容可以帮助到你&#xff01;&#xff01;&#xff01;&#xff01; 大家吼 ! 我是 逆境不可逃 今天给大家带来文章《【与我学 ClaudeCode】协作篇 之 Worktree Task Isolation &#xff1a;目录隔离的并行执行通道》. Le…...

机器学习驱动储氢材料发现:从特征工程到DFT/MD验证的完整指南

1. 项目概述与核心思路氢能被视为未来清洁能源体系的关键一环&#xff0c;但如何安全、高效、经济地储存氢气&#xff0c;一直是制约其大规模应用的瓶颈。在众多储氢技术路线中&#xff0c;固态储氢&#xff0c;特别是基于金属氢化物的储氢材料&#xff0c;因其高体积储氢密度和…...

MeloTTS实战:多语言语音合成的高效解决方案

MeloTTS实战&#xff1a;多语言语音合成的高效解决方案 【免费下载链接】MeloTTS High-quality multi-lingual text-to-speech library by MyShell.ai. Support English, Spanish, French, Chinese, Japanese and Korean. 项目地址: https://gitcode.com/GitHub_Trending/me/…...

通过Taotoken标准OpenAI协议实现分钟级集成现有代码

&#x1f680; 告别海外账号与网络限制&#xff01;稳定直连全球优质大模型&#xff0c;限时半价接入中。 &#x1f449; 点击领取海量免费额度 通过Taotoken标准OpenAI协议实现分钟级集成现有代码 1. 迁移背景与核心思路 许多开发团队在构建AI应用时&#xff0c;会直接使用O…...

2026数据治理平台选型:五款产品如何赋能数据中台建设?

一、引言&#xff1a;数据中台的成败&#xff0c;关键在治理在数字化浪潮的席卷下&#xff0c;“数据中台”已成为当代企业信息化架构中的核心战略组件。然而&#xff0c;一个悖论正困扰着大量企业&#xff1a;数据中台的基础设施搭建日趋完善&#xff0c;但真正将数据转化为业…...

别再纠结了!给激光焊接新手讲透单模和多模激光到底怎么选(附M²因子解读)

激光焊接设备选型指南&#xff1a;单模与多模激光的实战抉择 当你第一次站在激光焊接设备采购的十字路口&#xff0c;面对"单模"和"多模"这两个专业术语时&#xff0c;那种迷茫感我深有体会。五年前&#xff0c;我作为产线技术负责人&#xff0c;需要为汽车…...

实战解锁:在Blender中掌握专业级MMD动画制作全流程

实战解锁&#xff1a;在Blender中掌握专业级MMD动画制作全流程 【免费下载链接】blender_mmd_tools MMD Tools is a blender addon for importing/exporting Models and Motions of MikuMikuDance. 项目地址: https://gitcode.com/gh_mirrors/bl/blender_mmd_tools MMD …...

原来专业的赛事专用匹克球厂家有这么多门道?

引言在匹克球运动蓬勃发展的当下&#xff0c;专业赛事专用匹克球的选择至关重要。很多人可能不知道&#xff0c;看似普通的赛事专用匹克球背后&#xff0c;其实隐藏着诸多门道。接下来&#xff0c;我们就一起深入探究专业赛事专用匹克球厂家的秘密。核心技术与材料的门道专业赛…...

代码质量保卫战,从人工Review到DeepSeek自动审查的7天转型全记录

更多请点击&#xff1a; https://kaifayun.com 第一章&#xff1a;代码质量保卫战的范式转移 过去十年&#xff0c;代码质量保障已从“事后拦截”转向“全程共生”。单元测试覆盖率不再是KPI终点&#xff0c;而是开发流程的呼吸节律&#xff1b;静态分析不再停留于CI流水线末尾…...