javascript - 重新启动/重置并重播过渡CSS?

标签 javascript css transition

我需要使用 javascript 重放一个 css 转换。 当我重置我的 div 的 css 样式并应用新的过渡时,没有任何反应......

我认为这两个代码是在同一个执行框架中执行的,并且通过优化,它不会改变任何东西......

示例:https://jsfiddle.net/f0s8a8jp/2/

test.css({transition: 'none', height: '0px'});
test.css({transition: 'height 1s linear', height: '100px'});

目前我找到的唯一解决方案(对我来说不是很干净)是在属性重置和新过渡应用之间使用 setTimeout:https://jsfiddle.net/f0s8a8jp/3/

欢迎提出更好的想法?!

最佳答案

过渡将应用于元素的计算维度。设置 CSS 属性不会计算它。因此,设置和返回属性就像让它保持不变。它是在浏览器需要重排元素时计算的。

setTimeout 最终会将时间交给浏览器,同时计算回流。您可以使用 requestAnimationFrame 实现相同的效果而不会闪烁。

另一个技巧是强制浏览器在更改 CSS 属性后立即重排,例如使用 test[0].offsetWidth;。 然后正确执行转换:https://jsfiddle.net/f0s8a8jp/9/

有关回流(和重绘)的更深入讨论可在此处找到:http://www.phpied.com/rendering-repaint-reflowrelayout-restyle/

关于javascript - 重新启动/重置并重播过渡CSS?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37439605/

相关文章:

javascript - 如何在 JQuery 中禁用从一个列表框到另一个列表框的选定选项?

Javascript - 当数组包含一个对象和一个数组时检查两个数组是否相等

php - 隐藏基于当前月份的表格

javascript - 在 d3 中隐藏带有转换的工具提示

swift - 如何在 2 个 skscenes 之间转换

javascript - Django中如何在不刷新/提交表单的情况下显示与ID匹配的名称?

javascript - XHR HEAD 请求是否可以不遵循重定向(301 302)

jQuery CSS 高度

javascript - CSS3 关键帧淡入淡出动画不适用于 IE

css 悬停替代(自动)