在元素样式上设置 .cssText 时转换不起作用？

Question

我有以下 CSS sn-p：

.Test-Content {
  transition: height 2s;
}

以及以下 HTML 代码：

<div id="mydiv" class="Test-Content">foo</div>

使用纯 JavaScript，我正在尝试像这样更改 div 的高度：

myId = document.getElementById("mydiv");
myId.style.cssText = "height: 0;";

/* ... Lots of code and situations where the browser re-renders the page ... */

myId.style.cssText = "height: 100px";

这确实将div 的高度从原来的0 更改为100px，但没有任何动画，即立即。我不明白为什么会这样。毕竟，div 在其类列表中有.Test-Content，因此任何它的高度变化都会触发转换。

谁能解释一下为什么不是这样？

当我将其更改为以下（非常奇怪和令人担忧的）代码时，它按预期工作：

CSS：

.Test-Content-A {
  transition: height 2s;
  height: 0;
}
.Test-Content-B {
  transition: height 2s;
  height: 10px; /* or whatever number you prefer */
}

HTML：

<div id="mydiv" class="Test-Content-A Test-Content-B">foo</div>

JavaScript：（同上）

似乎我可以通过直接设置元素的style.cssText 来触发转换，前提是该元素在其类列表中也有两个具有不同height 属性的类。

我在 Firefox 和 Chrome 中遇到了这个问题（到目前为止还没有测试过其他的），在撰写本文时都处于当前的补丁级别。

Answer 1

您可能会遇到一些事情，如下面的 sn-p 所示。第一次点击“展开”或“折叠”时，它不会动画，但之后点击“展开”或“折叠”会触发动画。

document.getElementById("expand").addEventListener('click', () => {
  myId = document.getElementById("mydiv");
  myId.style.cssText = "height: 100px";
});

document.getElementById("collapse").addEventListener('click', () => {
  myId = document.getElementById("mydiv");
  myId.style.cssText = "height: 0;";
});

document.getElementById("unset").addEventListener('click', () => {
  myId = document.getElementById("mydiv");
  myId.style.cssText = "";
});

document.getElementById("setandexpand").addEventListener('click', () => {
  myId = document.getElementById("mydiv");
  myId.style.cssText = "height: 0;";
  setTimeout(() => { myId.style.cssText = "height: 100px"; });
});

.Test-Content {
  transition: height 2s;
}

<div id="mydiv" class="Test-Content">foo</div>

<button id="expand">Expand</button>
<button id="collapse">Collapse</button>
<button id="unset">Unset</button>


<button id="setandexpand">Set and expand</button>

您可能遇到的问题：

1。 CSS 只能从一个值过渡到一个值。

从cssText = ""（初始值）到cssText = "height: 100px" 没有动画。您可以通过单击“取消设置”然后单击“展开”或“折叠”来重现此内容。

2。如果在一段代码中多次设置 CSS，浏览器只会处理最后一个。

浏览器不会在设置更改后立即呈现更改，而是在执行所有可执行 JavaScript 和根据设置的内容更新页面之间切换。您可以通过将其分为两个离散步骤来解决此问题。最好的方法可能是在 HTML 中设置 style="height: 0" 或添加一个高度为零的类。

否则，您可以执行以下操作：

myId.style.cssText = "height: 0";
setTimeout(() => { myId.style.cssText = "height: 100px"; });

此代码将高度设置为零，让浏览器更新样式，然后执行将高度设置为 100 像素的新代码，浏览器可以对其进行动画处理。当然，你只需要调用cssText = "height: 0"，因为一旦它被渲染，浏览器就可以动画了。

您可以在 sn-p 中看到这一点，方法是单击“取消设置”，然后单击“设置并展开”。该元素将立即减小到零，然后扩展为 100px。多次点击不应该似乎会做任何事情，因为每次浏览器都会开始动画到零，然后在几毫秒内开始动画回到 100px。

Answer 2

使用 JS 触发 CSS 动画的最简单方法之一是更改类。

CSS：

.Test-Content {
  height: 0;
  transition: height 2s;
}
.Test-Content.taller {
  height: 10px;
}

然后，使用 Javascript：

1) 用于添加类（动画向前）

document.getElementById("mydiv").classList.add('taller');

2) 用于移除类（向后动画）

document.getElementById("mydiv").classList.remove('taller');

Answer 3

这可能无法回答您关于为什么转换不适用于style.cssText 的问题。但是，如果您希望 div 在页面加载时立即更改高度，我建议您使用动画，如下所示：

.Test-Content {
  transition: height 2s;
  height: 100px;
  animation: grow 2s;
}

@keyframes grow {
  from {
    height: 0
  }
  to {
    height: 100px;
  }
}

这消除了使用 JavaScript 的需要，并更好地帮助阻止 JavaScript 做 CSS 可以做的事情。