- Java 双重比较
- java - 比较器与 Apache BeanComparator
- Objective-C 完成 block 导致额外的方法调用?
- database - RESTful URI 是否应该公开数据库主键?
我用 javascript 写了这个函数:
function unhide(el, dur = 300, display = "block") {
el.style.display = display;
el.style.transitionDuration = dur + "ms";
el.style.opacity = 1;
}
出于某种原因,这在 Chrome 中不起作用。
我记得有过这样的问题,因为浏览器没有自动应用 Javascript 编写的 CSS。
因此,我尝试在显示更改后放置一个断点:
function unhide(el, dur = 300, display = "block") {
el.style.display = display;
● el.style.transitionDuration = dur + "ms";
el.style.opacity = 1;
}
这解决了问题。
同样的问题出现在 FireFox 中,但不会出现在 Microsoft edge 中。
我该如何解决这个问题?
有没有办法强制浏览器应用显示,然后应用不透明度?
我刚刚考虑过使用 setTimeout
(用于设置不透明度,因为再次显示不是自动应用),但是,这看起来很乱/低效的破解。
最佳答案
使用 requestAnimationFrame 的最小实现
function unhide(el, dur = 1000, display = "block") {
console.log("opacity when display none: ", getComputedStyle(mrHyde, null).opacity);
el.style.display = display;
console.log("opacity when display block: ", getComputedStyle(mrHyde, null).opacity)
el.style.transitionDuration = dur + "ms";
requestAnimationFrame(() => el.style.opacity = 1);
}
const mrHyde = document.getElementById("unhideMe");
unhide(mrHyde);
#unhideMe {
display: none;
opacity: 0;
}
<div id="unhideMe">Mr. Hyde</div>
编辑我将 setTimeout
替换为 requestAnimationFrame
。最终结果是一样的,但我觉得 requestAnimationFrame
更适合这个目的。
编辑 2此行为实际上已被报告为 bug .该线程的最后一条评论提出了一个我也在推测的假设。当元素处于 display: none
时,浏览器可能会“丢弃”opacity
的数值。这意味着设置 opacity: 1
不会触发 css 转换,因为转换仅适用于明确定义的样式属性值。在下一个事件循环中,浏览器将为该元素定义一个 opacity
值,因为它现在位于 display: block
中。
我通过记录元素在 display: none
和切换到 display: block
时计算出的样式值来证明这个假设>。这两个值实际上都是定义明确的数字 0
,因此这与假设相悖。
附注: http://caniuse.com/#feat=requestanimationframe截至 2017 年,requestAnimationFrame
的覆盖范围似乎相当可接受,包括 IE > 9 版本。
关于javascript - CSS 淡入淡出在 Chrome 中不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44315960/
今天有小伙伴给我留言问到,try{...}catch(){...}是什么意思?它用来干什么? 简单的说 他们是用来捕获异常的 下面我们通过一个例子来详细讲解下
我正在努力提高网站的可访问性,但我不知道如何在页脚中标记社交媒体链接列表。这些链接指向我在 facecook、twitter 等上的帐户。我不想用 role="navigation" 标记这些链接,因
说现在是 6 点,我有一个 Timer 并在 10 点安排了一个 TimerTask。之后,System DateTime 被其他服务(例如 ntp)调整为 9 点钟。我仍然希望我的 TimerTas
就目前而言,这个问题不适合我们的问答形式。我们希望答案得到事实、引用资料或专业知识的支持,但这个问题可能会引发辩论、争论、投票或扩展讨论。如果您觉得这个问题可以改进并可能重新打开,visit the
我就废话不多说了,大家还是直接看代码吧~ ? 1
Maven系列1 1.什么是Maven? Maven是一个项目管理工具,它包含了一个对象模型。一组标准集合,一个依赖管理系统。和用来运行定义在生命周期阶段中插件目标和逻辑。 核心功能 Mav
我是一名优秀的程序员,十分优秀!