如何在 JavaScript 中可靠地禁用 CSS 转换？

克服 CSS 过渡的挑战

在 Web 开发领域，暂时禁用 CSS 过渡效果可能会带来挑战。虽然简单地切换 CSS 类似乎很简单，但由于浏览器优化，这种方法常常存在不足。

解决方案：无过渡类和强制回流

要有效禁用过渡，可以使用 CSS 类使用 !important 标志将所有过渡属性设置为 none。然而，这个类だけでは、期待した动作は得られません。

.notransition {
  -webkit-transition: none !important;
  -moz-transition: none !important;
  -o-transition: none !important;
  transition: none !important;
}

技巧在于修改元素的CSS属性后强制元素回流。此刷新会刷新待处理的 CSS 更改，确保禁用转换。一种可靠的方法是访问元素的 offsetHeight 属性。

JavaScript 实现

不使用 jQuery：

someElement.classList.add('notransition'); // Disable transitions
doWhateverCssChangesYouWant(someElement);
someElement.offsetHeight; // Trigger a reflow, flushing the CSS changes
someElement.classList.remove('notransition'); // Re-enable transitions

使用jQuery:

$someElement.addClass('notransition'); // Disable transitions
doWhateverCssChangesYouWant($someElement);
$someElement[0].offsetHeight; // Trigger a reflow, flushing the CSS changes
$someElement.removeClass('notransition'); // Re-enable transitions

注意事项

确保 !important 足以覆盖现有样式。如果没有，请考虑使用 element.style.setProperty 手动禁用和重新启用转换。供应商前缀可以省略，因为大多数现代浏览器都支持没有它们的转换。

以上是如何在 JavaScript 中可靠地禁用 CSS 转换？的详细内容。更多信息请关注PHP中文网其他相关文章！