通过javascript触发高度更改的CSS转换

我试图通过使用javascript更改高度来触发元素的转换效果。我一直在寻找答案，但我能找到的只是使用css动画，我的代码与这个想法不兼容。这是我的密码

函数printVolumeLevel（级别）{
var volumeDiv=document.getElementById（'volume_level'）；
volumeDiv.innerHTML=“”；
var iconVolume=document.getElementById（'icon_volume'）；
iconVolume.innerHTML=“”；
if（OutputSettings.isAudioMuted（）==false）{
iconVolume.innerHTML+=“\n”；
volumeDiv.innerHTML+=“\n”；
volumeDiv.innerHTML+=“\n”；
var容积高度=等级*40；
document.getElementsByClassName（“volumeLevelFocus”）[0]。style.height=volumehight+“px”；
document.getElementsByClassName（“volumeLevelUnfocus”）[0].style.height=（800-volumehight）+“px”；
}否则{
iconVolume.innerHTML+=“\n”；
document.getElementsByClassName（“volumeLevelUnfocus”）[0].style.setProperty（“height”，“800px”）；
}
}

.volumeLevelFocus{
背景：#da1c5c；
宽度：40px；
-webkit过渡：高度0.2s；
过渡：高度0.2s；
-webkit过渡：宽度为0.2s；
过渡：宽度0.2s；
高度：400px；
}
.volumeLevelUnfocus{
背景#111a21；
宽度：40px；
-webkit过渡：高度0.2s；
过渡：高度0.2s；
高度：400px；
}

---

您的代码中存在多个问题：

您不能通过

/>

关闭div，它必须通过

关闭

要在html中换行，必须使用

而不是“\n”

您没有添加div

id=“icon\u volume”

如果要添加元素并通过转换更改其样式，则必须使用另一个进程（在应答setTimeot中）进行更改

您的代码是这样的：

插入高度为0px的分区

使_成为插入的_div的_高度（800px）

它只添加了一个高度为800px的div，因此没有样式更改，因此没有转换

下面是一个简单的答案：

.volumeLevelUnfocus{
背景#111a21；
宽度：40px；
过渡时间：5s；
高度：400px；
}

var volumeDiv=document.getElementById（'volume_level'）；
volumeDiv.innerHTML=“”；
volumeDiv.innerHTML+=“”；
//更改插入div高度的另一个过程：
setTimeout（函数（）{
document.getElementsByClassName（“volumeLevelUnfocus”）[0].style.height=“800px”；
}, 100);

看起来您没有关闭插入DOM中的div:/尝试关闭它们，转换仍然不起作用，因此OP和未来的访问者可能会了解到，这些问题是。。？请你的答案来解释你的答案。这只对这个用户有帮助，我看到很多这样的帖子。如果它是无用的，它将被关闭，所以我的回答不会打扰任何人我看不出有什么区别，实际上它们是很好的建议，但它们不能解决我的实际问题problem@UğurKURT，现在是不是回答了你？如果还有问题，请告诉我。