为什么通过 JavaScript 应用 CSS 转换会失败？

修复通过 JavaScript 分配时的 CSS 过渡

尝试通过 JavaScript 应用 CSS3 过渡时，可能会遇到指定过渡失败的情况尽管应用了正确的样式，但仍要执行。这种行为可能会令人费解，特别是当直接通过浏览器的检查器应用过渡时。

根本原因

要完全理解这一问题，必须了解CSS 过渡机制。要使过渡生效，必须执行三个关键步骤：

1. 目标元素必须显式定义过渡属性（例如，transition: opacity 2s;）。
2. 元素必须具有过渡属性集的初始值（例如，不透明度：0；）。
3. 必须应用过渡属性的新值（例如，不透明度：1；）。

当 JavaScript 动态分配类时（如提供的示例所示），存在潜在问题。浏览器需要时间来处理这些更改，并且动态分配目标类（例如“.target-fadein”）可能无法提供必要的延迟。

解决方案

为了解决这个问题，在分配目标类别之前需要延迟。这确保了浏览器有足够的时间来应用过渡属性并准备动画。以下代码片段说明了应用目标类时延迟的使用：

window.setTimeout(function() {
  slides[targetIndex].className += " target-fadein";
}, 100);

或者，您可以直接将目标类“.target-fadein-begin”添加到 HTML 中，以便解析它加载并准备好过渡。

其他见解

重要的是要认识到，简单地向元素添加过渡不会触发动画。实际的动画是通过更改过渡属性的值来触发的。这解释了为什么在检查器中手动设置初始和新属性值有效。

为了进一步说明，请考虑以下代码片段：

// Works
document.getElementById('fade1').className += ' fade-in'

// Doesn't work
document.getElementById('fade2').className = 'fadeable'
document.getElementById('fade2').className += ' fade-in'

// Works
document.getElementById('fade3').className = 'fadeable'

window.setTimeout(function() {
  document.getElementById('fade3').className += ' fade-in'
}, 50)

在这种情况下，第一个块起作用是因为过渡的所有三个条件均已满足。该元素定义了一个过渡，初始不透明度设置为 0，新的不透明度设置为 1。第二个块失败，因为在应用过渡类之前未显式定义初始不透明度值。第三个块之所以有效，是因为延迟允许浏览器在应用转换之前处理初始值设置。

以上是为什么通过 JavaScript 应用 CSS 转换会失败？的详细内容。更多信息请关注PHP中文网其他相关文章！