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

我有以下CSS片段：

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

以及以下HTML代码：

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

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

有人能解释一下为什么不是这样吗

当我将其更改为以下非常奇怪且令人担忧的代码时，它的工作原理与预期一致：

CSS:

HTML:

JavaScript：同上

似乎只有当元素的类列表中还有两个具有不同高度属性的类时，我才能通过直接设置元素的style.cssText触发转换

---

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

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

CSS:

然后，使用Javascript：

1用于添加向前设置动画的类

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

2用于删除反向设置动画的类

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

---

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

CSS:

然后，使用Javascript：

1用于添加向前设置动画的类

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

2用于删除反向设置动画的类

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

---

下面的代码片段说明了您可能会遇到一些问题。第一次单击“展开”或“折叠”时，它不会设置动画，但随后单击“展开”或“折叠”将触发动画

document.getElementByIdexpand.addEventListener'click'，=>{ myId=document.getElementByIdmydiv； myId.style.cssText=高度：100px； }; document.getElementByIdcollapse.addEventListener'click'，=>{ myId=document.getElementByIdmydiv； myId.style.cssText=高度：0；； }; document.getElementByIdunset.addEventListener'click'，=>{ myId=document.getElementByIdmydiv； myId.style.cssText=； }; document.getElementByIdsetandexpand.addEventListener'click'，=>{ myId=document.getElementByIdmydiv； myId.style.cssText=高度：0；； setTimeout=>{myId.style.cssText=height:100px；}； }; .测试内容{ 过渡：高度2s； } 福 扩大 崩溃 取消

---

设置并展开如下代码片段所示，您可以遇到一些问题。第一次单击“展开”或“折叠”时，它不会设置动画，但随后单击“展开”或“折叠”将触发动画

document.getElementByIdexpand.addEventListener'click'，=>{ myId=document.getElementByIdmydiv； myId.style.cssText=高度：100px； }; document.getElementByIdcollapse.addEventListener'click'，=>{ myId=document.getElementByIdmydiv； myId.style.cssText=高度：0；； }; document.getElementByIdunset.addEventListener'click'，=>{ myId=document.getElementByIdmydiv； myId.style.cssText=； }; document.getElementByIdsetandexpand.addEventListener'click'，=>{ myId=document.getElementByIdmydiv； myId.style.cssText=高度：0；； setTimeout=>{myId.style.cssText=height:100px；}； }; .测试内容{ 过渡：高度2s； } 福 扩大 崩溃 取消

---

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

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

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

---

这消除了使用JavaScript的需要，并且更好地帮助JavaScript避免做CSS可以做的事情

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

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

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

---

这消除了使用JavaScript的需要，并且更好地帮助JavaScript避免做CSS可以做的事情

谢谢，我投票支持你的努力。但正如我所写的，在这种情况下，简单的方法是不可行的。此外，我非常想了解到底是什么问题。谢谢，并投票支持我的努力。但正如我所写的，在这种情况下，简单的方法是不可行的。此外，我非常想了解到底是什么问题。谢谢，并投票支持我的努力。但我需要在JavaScript中更改div的高度，因为我应该在事件处理程序中进行更改。@Binarus只是出于好奇：如果您想在事件处理程序中进行更改，为什么不在示例代码中的事件处理程序中进行更改？另外，为什么要使用style.cssText而不是style.height？ad 1代码相当大，因此将其剥离可能需要相当长的时间。ad 2，因为我必须将height属性与其他属性合并，这些属性可能已经在元素的direct（即非自类）样式中设置，

---

事实证明，将其添加到.cssText中是目前为止最简单的方法。谢谢，并投票支持这项工作。但我需要在JavaScript中更改div的高度，因为我应该在事件处理程序中进行更改。@Binarus只是出于好奇：如果您想在事件处理程序中进行更改，为什么不在示例代码中的事件处理程序中进行更改？另外，为什么要使用style.cssText而不是style.height？ad 1代码相当大，因此将其剥离可能需要相当长的时间。ad 2，因为我必须将height属性与其他属性合并，这些属性可能已经在元素的direct（即非自类）样式中设置，并且结果表明，仅将其附加到.cssText中是最简单的方法。非常感谢并向上投票。这是我经常忘记的事情。但是，在这种情况下，这可能不是罪魁祸首，因为设置为0和设置为100发生在事件处理程序中，该事件处理程序处理对按钮的单击，并且每次交替执行，因此浏览器有足够的机会在这两种情况之间呈现页面。我将对问题进行相应的编辑。非常感谢，并投了赞成票。这是我经常忘记的事情。但是，在这种情况下，这可能不是罪魁祸首，因为设置为0和设置为100发生在事件处理程序中，该事件处理程序处理对按钮的单击，并且每次交替执行，因此浏览器有足够的机会在这两种情况之间呈现页面。我将相应地编辑这个问题。

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

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