开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

使用vanilla javascript在延迟后添加类

在Web开发中，延迟后添加类是一种常见的需求，通常用于实现动画效果、延迟加载或其他交互功能。使用纯JavaScript（vanilla JavaScript）可以实现这一功能。以下是涉及的基础概念、相关优势、类型、应用场景以及示例代码。

基础概念

setTimeout: 这是一个JavaScript内置函数，用于在指定的毫秒数后执行一个函数或一段代码。
classList: 这是一个DOM元素的属性，提供了操作元素类名的方法，如add、remove和toggle。

相关优势

性能: 纯JavaScript避免了引入额外的库或框架，减少了页面加载时间和内存占用。
灵活性: 可以精确控制延迟时间和类名，适应各种复杂的交互需求。
兼容性: 现代浏览器普遍支持这些基本的JavaScript API，确保了良好的跨浏览器兼容性。

类型

固定延迟: 在固定的时间后添加类。
动态延迟: 根据某些条件或事件动态计算延迟时间。

应用场景

动画效果: 如淡入淡出、滑动展开等。
延迟加载: 在页面加载一段时间后再显示某些元素。
用户交互: 如点击按钮后延迟执行某些操作。

示例代码

以下是一个简单的示例，展示了如何在延迟后为一个元素添加类：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Delay Add Class Example</title>
    <style>
        .hidden {
            opacity: 0;
            transition: opacity 1s ease-in-out;
        }
        .visible {
            opacity: 1;
        }
    </style>
</head>
<body>
    <div id="myElement" class="hidden">Hello, World!</div>

    <script>
        // 获取目标元素
        const element = document.getElementById('myElement');

        // 设置延迟时间（例如2秒）
        const delay = 2000;

        // 使用setTimeout在延迟后添加类
        setTimeout(() => {
            element.classList.add('visible');
        }, delay);
    </script>
</body>
</html>

解释

HTML部分: 定义了一个带有初始类hidden的div元素。
CSS部分: 定义了两个类.hidden和.visible，分别控制元素的透明度和过渡效果。
JavaScript部分:
- 获取目标元素。
- 设置延迟时间为2000毫秒（即2秒）。
- 使用setTimeout函数在指定延迟后调用回调函数，该回调函数通过element.classList.add('visible')为元素添加visible类，从而触发CSS过渡效果。

通过这种方式，可以实现简单的延迟添加类的效果，适用于多种交互场景。

相关搜索:HTML <a>使用vanilla javascript添加类属性使用vanilla javascript添加与类名匹配的增量数据属性通过"Vanilla JavaScript“添加和删除类时出现错误使用JavaScript在特定延迟后执行脚本 Vanilla Javascript扩展类并在页面上使用它在Vanilla JavaScript上使用font awesome 在延迟加载图像后启动javascript 如何使用vanilla JavaScript在Ul li上有默认和删除类？使用Vanilla JS中的数据属性添加/删除类如何使用按钮在javascript中添加类循环元素并检查类在vanilla javascript中的子类在for循环的每次迭代后添加延迟在Vanilla Javascript中使用按钮的黑暗模式如何使用vanilla javascript在单击时删除<li>？Javascript只有在调整窗口大小后才能添加类吗？如何使用VANILLA JS向嵌套的Dom元素添加类使用JavaScript向'body‘添加类在JavaScript中使用SetTimeout延迟函数 React-Transition-Group在添加*-enter类之前添加延迟 React添加延迟以在状态中应用类

相关搜索:

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

在 vue 项目中使用各种 javascript 类库

_注意:这篇文章原载于the Vue.js Developers blog 2017/04/22_ 如何引入一个类库到你的 Vue.js 项目中全局变量最直接添加一个类库到你的项目中的方法，是让这个类库作为一个全局变量挂载在...引入到每个文件中另一个二流方法是在每一个文件中都把类库文件引入进去。...一个更好的解决方案在 Vue 项目中使用一个 Javascript 库的最干净且最健壮的方法是将他代理为 Vue 原型对象的属性。...axios.js export default { install: function(Vue) { // Do stuff } } 现在我们可以使用我们私有的方法去把类库添加到原型对象...全栈工程师技能大全配置一个简单实用的JavaScript开发环境推翻JavaScript中的三座大山：作用域篇掌握Chrome开发工具：新一代前端开发技术 WEB前端性能优化常见方法在 Vue

2.1K1 0

如何在Nuxt应用程序中加载外部脚本

stylesheet", href: "https://some-site.com/stuff.css" } ] } } } 您可以在nuxt.config.js...上面的代码会将脚本添加到head元素。 Vue-meta：将脚本加载到body中如果您希望将脚本添加到body中，只需添加body: true即可。?...允许您添加延迟或异步加载的脚本。...如果要使用async和defer加载它，则可以添加async: true 和 defer: true： script: [ { src: "https://some-website.com/...幸运的是，Nuxt提供了一种使用vue-meta的简便方法。另外，还可以使用Vue的mounted生命周期方法修改DOM以便自己插入。后者适用于vanilla(原生)Javascript。谢谢阅读。

5K1 0

前端技术观察第26期

类装饰器新提议(英) 针对JavaScript类装饰器的新提议，目前处于TC39流程的第二阶段，它提供了一种通过将方法和其他”语法形式”包装额外功能来扩展自身的方法，并且增加了元数据，此提案不同于2018...支持在设备上通过USB或WiFi调试Safari, WebViews(和Chrome)，也可以在windows上调试ios web，同时支持多种框架的devtools等多个特点。...https://inspect.dev/ Mongoose 5.10新增乐观并发控制(乐观锁)(英) Optimistic concurrency核心思想是追踪文档的版本并在每次保存后增加版本，当在加载文档和保存文档之间...www.smashingmagazine.com/2020/09/design-reduced-motion-sensitivities/ App审核流程更新(英) 更新内容:对于App Store中已存在的应用程序，错误修复将不再因违反准则而延迟...：一个小型的拾色器小型、快速、支持 TS、支持移动端 https://github.com/web-padawan/vanilla-colorful Cropper.js：JavaScript 图像裁剪器

1.2K2 0

轻量级工具Vite到底牛在哪, 一文全知道

当我们把文件重命名并添加一些TypeScript特定的语法后，所有文件都可以更好的进行编译。使用CSS时，有人会将其重命名为CSSstyle.scss，并添加一些特定于Sass的语法。...运行npm install sass --save-dev并重新启动观察程序后，就可以使用Sass满足我们的需求了。...在实际使用中Vite令人惊叹，我们可以在一两分钟内就建立一个非常高级的堆栈，并且能够轻松完成从JavaScript到TypeScript的转换以及从CSS到Sass的转换。...在这里，测试者尝试导入了一个100kB的JavaScript库，并添加了2万行CSS，将文件类型更改为TypeScript和Sass，强制Vite分别使用TypeScript和Sass编译器进行编译。...尽管会有一些延迟，但结果仍然远超预期。

4.1K4 0

业界 | 谷歌开源DeepLearn.js：可实现硬件加速的机器学习JavaScript库

本文档中，我们使用 TypeScript 代码示例。对于 vanilla JavaScript，你可能需要移除 TypeScript 语法，如 const、let 或其他类型定义。 ?...GPU 上储存数据，每一个像素储存一个浮点值；或者作为 vanilla JavaScript TypedArray 在 CPU 上储存数据。...NDArrayMath 该库提供一个 NDArrayMath 基类，其为定义在 NDArray 上运行的一系列数学函数。...NDArrayMathCPU 当我们使用 CPU 实现模型时，这些数学运算是封闭的并且可以通过 vanilla JavaScript 在底层 TypedArray 上立即执行。...训练在 deeplearn.js 中的可微数据流图使用的是延迟执行模型，这一点就和 TensorFlow 一样。

1.1K8 0

最小编译器和 UI 框架「GitHub 热点速览」

简单来说，它可以让特定用户访问指定的对象或者是实体流程，支持添加角色（RBAC）、属性（ABAC）。...GitHub 地址→https://github.com/casbin/casbin 2.3 文件管理器：joshuto 本周 star 增长数：800+，主语言：Rust 类 ranger 的终端文件管理器...据说是最小的响应式 UI 框架，VanJS 是 Vanilla JavaScript 的缩写，是个轻量级、零依赖的响应式 UI 框架，基于纯 vanilla JavaScript 和 DOM 实现。...它的用法同 React 有点类似，可以参考下面的代码： // Reusable components can be just pure vanilla JavaScript functions. //...它无需安装下载压后双击文件即可使用，但是视频素材下载需要等待，支持 macOS 10.12 以上和 Apple TV。

3042 0

怎样编写更好的 JavaScript 代码

正确设置 TS 后，如果事先没有定义好接口和类，就很难编写代码。这也提供了一种简洁的分享、交流架构方案的方法。...但对于所有对象（类，数组，dicts），const 并不能保证不变性。箭头函数 => 箭头函数是在 JS 中声明匿名函数的简明方法。匿名函数即描述未明确命名的函数。...Vanilla 匿名函数在作用域方面表现得“有趣”，这可能导致许多意外错误。有了箭头函数，我们就不必再担心了。...在这里我想说清楚，这和 var 不一样，对于 vanilla 匿名函数（特别是类方法）仍有效。话虽这么说，但如果你总是默认使用箭头函数而不是vanilla匿名函数的话，最终你debug的时间会更少。...如果这是 C 代码，我们将会进行不同的讨论，因为使用情况不同，编译器可以使用循环实现相当多的技巧。在 JavaScript 中，只有绝对必要时才应使用传统的 for 循环。

1.3K3 0

Vanilla JS——最轻快的JavaScript框架

简介 Vanilla JS团队维护每个字节的代码框架,每天努力工作,以确保它是小的和直观的。使用Vanilla JS是谁?很高兴你发问!...核心功能; DOM(遍历/选择器); 基于原型的对象系统; AJAX; 动画; 事件系统; 正则表达式; 函数作为第一类对象; 闭包; 数学库; 数组库; 字符串库开始使用 Vanilla JS是世界上最轻量的...javascript 框架，浏览器向站点发送请求前就已经把Vanilla JS加载在浏览器里了。...使用Vanilla JS只需在应用的HTML里加入这行： vanilla.js"> 当你部署你的应用的时候，使用这个更快的方法：没错！...没有任何代码，Vanilla JS 太流行了，所有的浏览器在十年前就已经内置了它。

6.2K4 0

轻量迅捷时代，Vite 与Webpack 谁赢谁输

而这也会导致一个不可避免的情况，使用Webpack启动应用程序的服务器，会花费比较长的时间——一些大型应用程序可能需要10分钟以上。此时你心里可能已经在抓狂了，为什么会这么费时间？...Vite Vite是新一代JavaScript构建工具，旨在提高开发人员在构建JavaScript应用程序时对Webpack的体验。...开始开发后，Vite将首先将JavaScript模块分为两类：依赖模块和应用程序模块。依赖模块是从node_modules文件夹导入的JavaScript模块。...Vite 的捆绑构建虽然现在所有主流浏览器都支持原生ES模块，但发布一个包含诸如tree-shaking、延迟加载和通用块拆分等性能优化技术的捆绑应用程序，仍然比非捆绑应用程序会为开发者带来更好的使用体验...React 的起始页与Create React App的默认模板非常相似，只是稍作修改：此外Vite preview用于在本地对应用进行预览，还支持许多官方模板，包括vanilla JavaScript

9172 0

使用 Vanilla JavaScript 框架创建一个简单的天气应用

大家好，不知道大家听说过 Vanilla JavaScript 这款框架吗？...最近我在浏览国外的一些技术网站时，这个词出现的频率实在是在太高了，好多框架都宣称自己是基于 Vanilla JavaScript。那到底什么是 Vanilla JavaScript 呢？...Vanilla JS 是一个快速、轻量级、跨平台的JavaScript框架。我们可以用它构建强大的JavaScript应用程序。...大家是不是觉得很这个框架很强大呢，哈哈，不和大家卖关子了，Vanilla JavaScript 就是原生JavaScript。...本篇文章，我将和大家一起使用原生 JavaScript 创建一个简单的天气查询应用。

1.6K3 0

为什么 Netflix 部分功能放弃React，选择“原生”JavaScript？

在技术圈，Netflix可是妥妥的“顶流”，但你能想象吗？它竟然在2017年悄悄对自家网站动了个“大手术”：部分功能从React切换到了“原味”的Vanilla JavaScript。...等页面加载完成后，Vanilla JavaScript则接管了交互逻辑。...使用现代工具：比如Webpack、Vite等打包工具，可以帮助你实现更细粒度的代码分割和加载优化。...而Netflix的策略是：在需要的地方用React，在轻量化场景用Vanilla JavaScript。这样的搭配不仅让性能飞跃，还让技术栈更加灵活。...特别是在不需要复杂交互的场景下，Vanilla JavaScript是极简而高效的选择。优化用户体验是最终目标：无论用什么技术，核心目的都是让用户感受到“快”和“流畅”。

1071 0

Github 移除 JQuery 的过程

最重要的是，使用jQuery在一个浏览器中构建的JavaScript特性通常也可以在其他浏览器中工作。...实现CSS类名切换； CSS现在支持在样式表而不是JavaScript中定义可视化动画； $.ajax请求可以使用Fetch标准执行； addEventListener（）接口足够稳定，可以跨平台使用；...作为我们在GithUB.com上构建前端功能的一种改进方法的一部分，我们专注于尽可能多地使用常规HTML基础，只添加JavaScript行为作为渐进增强。...因此，即使那些使用JS增强的web表单和其他UI元素通常也会在浏览器中禁用JavaScript。在某些情况下，我们能够完全删除某些遗留行为，而不必在vanilla JS中重写它们。...这意味着我们将尽可能多的内容保存在标记中，并且只在标记上添加行为。

2.1K1 0

使用 Vanilla JavaScript 框架创建一个简单的天气应用

大家好，不知道大家听说过 Vanilla JavaScript 这款框架吗？...最近我在浏览国外的一些技术网站时，这个词出现的频率实在是太高了，好多框架都宣称自己是基于 Vanilla JavaScript。那到底什么是 Vanilla JavaScript 呢？...Vanilla JS 是一个快速、轻量级、跨平台的JavaScript框架。我们可以用它构建强大的JavaScript应用程序。...大家是不是觉得很这个框架很强大呢，哈哈，不和大家卖关子了，Vanilla JavaScript 就是原生JavaScript。...本篇文章，我将和大家一起使用原生 JavaScript 创建一个简单的天气查询应用。

1.7K2 0

移除jQuery好像也没那么难

在 JavaScript 中，$() 或 jQuery() 的等价物是 querySelector() 或 querySelectorAll()，它们同样可以使用 CSS 选择器。...与 jQuery 可以直接对选择的所有元素调用方法不同，在纯 JavaScript 中，你需要使用 NodeList.forEach() 遍历这个 NodeList。...// jQuery $(document).ready(function() { /* 在 DOM 完全加载后执行操作 */ }); // JavaScript // 定义一个方便的方法并使用它...DOM 完全加载后执行操作 */ }); 切换元素类名通过 classList 属性，您可以方便地在 JavaScript 中添加、删除或切换类名。...使用 appendChild 向 DOM 中添加元素本文译自：https://tobiasahlin.com/blog/move-from-jquery-to-vanilla-javascript/

1361 0

基于Vite+React构建在线Excel

Vite最初发行时，仅能用来构建Vue3项目，但随着随用群体的不断扩大，目前能支持构建的项目越来越多，已经包含了以下几种项目模板： JavaScript TypeScript vanilla vanilla-ts...项目默认启动在3000端口。打开后展示如上图所示，到这一步我们使用Vite就已经创建好React项目了，接下来我们需要引入纯前端表格控件，用来构建一个在线Excel。...要想使用，就必须先引入组件相关资源，我们可以在package.json中添加以下内容： "dependencies": { "react": "^18.0.0", "react-dom"...grapecity/spread-sheets-designer-react": "15.0.7", "@grapecity/spread-sheets-tablesheet": "15.0.7" }, 添加完成后...当然，大家在引入时，可以现在npm上查找一下SpreadJS目前最新的版本，去引入最新版本的产品。引入完成后，将项目中不需要使用的东西删一删，让页面看起来干净一点。

8043 0

如何制作自己的原生 JavaScript 路由

但实际上，这些库和框架仍然使用 vanilla JavaScript。那么该怎么实现呢？我希望这个“JavaScript 路由教程”能够帮你了解如何用原生 JS 写出自己的路由。...最重要的是，使用 vanilla JS router 可以减少你对框架的依赖。只要你了解实现它所涉及的所有部分，就可以相对容易的在原生 JavaScript 中创建自己的路由。...你可以选择将路由存储在 routes[] 数组中。必须用 JavaScript 正则表达式（RegEx）才能解析 URL。...JavaScript 的 History API 我看过很多没有提到 JavaScript History API 的 vanilla JS router 教程。...我们在这里没有使用 React 或 Vue，因此在我的源代码中 load_content 将负责直接在 DOM 中更新视图。此区域可能填充了你的 API 加载的某些内容。

3.9K2 0

「create-?」每个前端开发者都可以拥有属于自己的命令行脚手架

是因为最近一直在搞Strve.js生态，在自己捣鼓框架的同时也学到了很多东西。所以就本篇文章给大家介绍一种更加方便灵活的命令行脚手架工具，以及如何发布到NPM上。...', color: yellow, variants: [ { name: 'vanilla', display: 'JavaScript',...yarn link命令来将此命令在本地可以运行。...: 'vanilla', display: 'JavaScript', color: yellow }, { name: 'vanilla-ts...上图显示的Error，是因为我没有在demo模板上创建package.json文件，所以这里可以忽略。你可以在自己的模板里创建一个package.json文件。

1.1K3 0

解释一下为什么我很少用jQuery

有一个东西，叫Vanilla JS，是一个快速、轻量级、跨平台的JavaScript框架。几乎所有著名的互联网企业都使用它。...同时，它也是这个世界上最轻量级的javascript框架(没有之一),它有多快?...如下我们在HTML里引入Vanilla JS： vanilla.js"> 比上面更快的方法是：什么？没有代码？...是的，就是没有代码，因为Vanilla JS实在太强了，以至于所有的浏览器在10年前内置了它。...JavaScript中的对应方法。

9644 0

Qwik带来简洁高效的Astro开发

我最近的许多项目都是使用 Astro 构建的(默认情况下不会向客户端发送任何 JavaScript - 非常适合快速、轻量和高性能的内容网站)。...但有时，我确实需要一点客户端 JavaScript 来实现交互。在这时，我发现自己在普通 Vanilla JavaScript 和 React 之间难以抉择。...一方面，Vanilla JavaScript 通常比 React 更轻量，但维护起来可能会变得困难。...Qwik Astro 集成如我所言，我目前对 Qwik 的探索主要集中在我使用 Astro 的工作上。...如你所见，开始使用只需要安装集成并将其添加到 Astro 配置中即可。

2231 0

React V16.9来了无痛感升级加入性能检测【译-真香】

弃用“工厂”组件在使用Babel编译JavaScript类之前变得流行之前，React支持使用render方法返回对象的“工厂”组件： function FactoryComponent() {...如果您依赖它，添加FactoryComponent.prototype = React.Component.prototype可以作为一种解决方法。或者，您可以将其转换为类或函数组件。...这些示例使用vanilla DOM API，但您也可以使用React Testing Library来减少样板代码。它的许多方法已在act()内部使用。...在React 16.9中，我们还添加了一种编程方式来收集所谓的测量。我们预计大多数较小的应用都不会使用它，但在较大的应用中跟踪性能回归可能很方便。...在第一个版本中，我们不打算关注我们在早期演示中使用的临时“触发HTTP请求”解决方案（也称为“React Cache”）。但是，我们希望我们和React社区将在首次发布后的几个月内探索该空间。

4.8K3 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭