我有以下CSS片段：
.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：(同上(
似乎只有当一个元素的类列表中也有两个具有不同height属性的类时，我才能通过直接设置该元素的style.cssText来触发转换。
我在Firefox和Chrome中遇到了这个问题(到目前为止还没有测试其他版本(，在撰写本文时，这两个版本都处于当前的补丁级别。
如下面的片段所示，您可以遇到一些事情。第一次单击"展开"或"折叠"时，它将不会设置动画，但之后单击"扩展"或"塌陷"将触发动画。
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"; });
这段代码将高度设置为零，让浏览器更新样式，然后执行新代码，将高度设置成100px，浏览器可以对其进行动画处理。当然，您只需要调用cssText = "height: 0"，因为一旦它被渲染，浏览器就可以设置动画。
您可以在代码段中看到这一点，方法是单击"取消设置"，然后单击"设置并展开"。该元素将立即减少到零，然后扩展到100px。多次单击不应该，因为每次浏览器都会开始将动画设置为零，然后在几毫秒内将动画设置回100px。
用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');
这可能无法回答您关于为什么转换不适用于style.cssText的问题。但是，如果您希望div在页面加载时更改高度，我建议您使用以下动画：
.Test-Content {
transition: height 2s;
height: 100px;
animation: grow 2s;
}
@keyframes grow {
from {
height: 0
}
to {
height: 100px;
}
}
这消除了使用JavaScript的需要，并更好地帮助JavaScript做CSS可以做的事情