广告
返回顶部
首页 > 资讯 > 前端开发 > VUE >如何使用JavaScript函数暂时禁用CSS转换
  • 818
分享到

如何使用JavaScript函数暂时禁用CSS转换

2024-04-02 19:04:59 818人浏览 泡泡鱼
摘要

这篇文章给大家分享的是有关如何使用javascript函数暂时禁用CSS转换的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。这个提示实际上不是一个JavaScript函数,而是一个

这篇文章给大家分享的是有关如何使用javascript函数暂时禁用CSS转换的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。

这个提示实际上不是一个JavaScript函数,而是一个CSS代码块。在您调整参与的CSS属性值时,暂时禁用CSS过渡可能是有用的或必要的,这应该立即发生在幕后。 Stackoverflow上的这篇文章提供了一个完成此任务的解决方案,通过在CSS中定义一个“无转换”类,您可以将该类添加到元素中以暂时停止其上的任何转换:

1

2

3

4

5

6

.notransition {<font></font>

    -WEBkit-transition: none !important;<font></font>

    -moz-transition: none !important;<font></font>

    -o-transition: none !important;<font></font>

    transition: none !important;<font></font>

}

例如:

1

2

3

4

5

targetel.classList.add('notransition') // disable transitions<font></font>

targetel.style.left = '10px' // update "left" property but don't transition it<font></font>

targetel.offsetHeight // Trigger a reflow, flushing the CSS changes<font></font>

targetel.classList.remove('notransition') // enable transitions again<font></font>

targetel.style.left = '500px' // transition "left" property again

如添加了“无转变”类同样重要的是回流 通过访问元素targetel.offsetHeightoffsetHeight 是一个 几个DOM属性是访问时触发要素回流),以强制浏览器履行在同坐的元素所做的每一个变化。

感谢各位的阅读!关于“如何使用JavaScript函数暂时禁用CSS转换”这篇文章就分享到这里了,希望以上内容可以对大家有一定的帮助,让大家可以学到更多知识,如果觉得文章不错,可以把它分享出去让更多的人看到吧!

--结束END--

本文标题: 如何使用JavaScript函数暂时禁用CSS转换

本文链接: https://www.lsjlt.com/news/83329.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑,方便收藏和打印~

下载Word文档
猜你喜欢
  • 如何使用JavaScript函数暂时禁用CSS转换
    这篇文章给大家分享的是有关如何使用JavaScript函数暂时禁用CSS转换的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。这个提示实际上不是一个JavaScript函数,而是一个...
    99+
    2022-10-19
  • 如何使用JavaScript检测CSS转换何时结束
    小编给大家分享一下如何使用JavaScript检测CSS转换何时结束,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!检测转换何时结...
    99+
    2022-10-19
  • 怎么使用JavaScript检测CSS转换何时结束
    本篇内容介绍了“怎么使用JavaScript检测CSS转换何时结束”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!我们可以使用JavaScri...
    99+
    2023-06-02
  • php时区转换函数怎么使用
    这篇文章主要介绍“php时区转换函数怎么使用”的相关知识,小编通过实际案例向大家展示操作过程,操作方法简单快捷,实用性强,希望这篇“php时区转换函数怎么使用”文章能帮助大家解决问题。函数有2个:1、ini_set(),语法“ini_set...
    99+
    2023-06-30
  • 怎么在PHP中使用时间转换函数
    这篇文章主要介绍“怎么在PHP中使用时间转换函数”,在日常操作中,相信很多人在怎么在PHP中使用时间转换函数问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”怎么在PHP中使用时间转换函数”的疑惑有所帮助!接下来...
    99+
    2023-07-05
  • 如何在Shell中使用Epoch函数对日期时间进行转换
    如何在Shell中使用Epoch函数对日期时间进行转换?相信很多没有经验的人对此束手无策,为此本文总结了问题出现的原因和解决方法,通过这篇文章希望你能解决这个问题。核心代码当你遇到一个date命令不给力的系统时,可以试试这几个小函数。#日期...
    99+
    2023-06-09
  • 如何使用PHP date()函数将时间戳转换为日期格式
    这篇“如何使用PHP date()函数将时间戳转换为日期格式”文章的知识点大部分人都不太理解,所以小编给大家总结了以下内容,内容详细,步骤清晰,具有一定的借鉴价值,希望大家阅读完这篇文章能有所收获,下面我们一起来看看这篇“如何使用PHP d...
    99+
    2023-07-05
  • PHP如何使用函数实现类型转换
    这篇文章主要介绍了PHP如何使用函数实现类型转换,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。转换函数转换通过intval() floatval() strval()三个转换...
    99+
    2023-06-17
  • JavaScript高级函数应用之如何使用分时函数
    这篇文章主要介绍JavaScript高级函数应用之如何使用分时函数,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!具体如下:一、前提介绍:某些函数是用户主动调用的,但因为一些客观的原因...
    99+
    2022-10-19
  • javascript使用哪个字符函数将ascii转换为字符
    这篇文章主要介绍javascript使用哪个字符函数将ascii转换为字符,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完! 在javascript中,可使用...
    99+
    2022-10-19
  • 如何使用JavaScript中的字符串转换数字
    这篇文章给大家介绍如何使用JavaScript中的字符串转换数字,内容非常详细,感兴趣的小伙伴们可以参考借鉴,希望对大家能有所帮助。js 字符串转换数字方法主要有三种: 转换函数、强制类型转换、利用js变量...
    99+
    2022-10-19
  • JavaScript如何使用+将字符串转换成数字
    这篇文章将为大家详细讲解有关JavaScript如何使用+将字符串转换成数字,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。使用+将字符串转换成数字这个技巧非常有用,其非常简单,可以交字符串数据转换成数字,...
    99+
    2023-06-27
  • SQLserver中如何使用convert函数转换日期格式
    这篇文章给大家介绍SQLserver中如何使用convert函数转换日期格式,内容非常详细,感兴趣的小伙伴们可以参考借鉴,希望对大家能有所帮助。SQL Server中文版的默认的日期字段datetime格式...
    99+
    2022-10-18
  • css如何使用repeat()函数
    这篇文章将为大家详细讲解有关css如何使用repeat()函数,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。repeat()repeat函数用来批量处理网格,接收2个参数,第一个参数表示执行次数,第二个参...
    99+
    2023-06-03
  • css如何使用minmax()函数
    这篇文章主要介绍了css如何使用minmax()函数,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。minmax()minmax函数表示一个闭区间范围[min,max],当值小...
    99+
    2023-06-08
  • opencv中颜色空间转换函数cv2.cvtColor()如何使用
    这篇“opencv中颜色空间转换函数cv2.cvtColor()如何使用”文章的知识点大部分人都不太理解,所以小编给大家总结了以下内容,内容详细,步骤清晰,具有一定的借鉴价值,希望大家阅读完这篇文章能有所收获,下面我们一起来看看这篇“ope...
    99+
    2023-06-30
  • JavaScript中如何使用Number()把字符串转换为数值
    这篇文章主要介绍了JavaScript中如何使用Number()把字符串转换为数值,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。 Java...
    99+
    2022-10-19
  • CSS中如何使用calc()函数
    小编给大家分享一下CSS中如何使用calc()函数,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!   首先我们来看看如何使用c...
    99+
    2022-10-19
  • css如何使用fit-content()函数
    这篇文章给大家分享的是有关css如何使用fit-content()函数的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。fit-content()fit-content函数,接收一个参数,长度值,可以按照字面意思来解...
    99+
    2023-06-08
  • css如何使用颜色函数
    这篇文章主要为大家展示了“css如何使用颜色函数”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“css如何使用颜色函数”这篇文章吧。颜色函数1. 基本概念我们可能已经很熟悉 Hex、RGB 和 H...
    99+
    2023-06-27
软考高级职称资格查询
推荐阅读
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作