CSS转换是即时Elementor

Question

EDIT：修复了Elementor覆盖某些样式的问题，请参阅下面我自己的答案。

我正在尝试为div的一个简单的最大高度属性设置动画，但我似乎无法为转换设置动画，它会立即转换。我正在尝试复制此w3schools教程：https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_collapsible_animate

我使用这个Javascript来更改按钮点击的最大高度：

<script>
var coll = document.getElementsByClassName("section_button");

var i;
for (i = 0; i < coll.length; i++) {
coll[i].addEventListener("click", function() {

var content = this.nextElementSibling;
if (content.style.maxHeight){
content.style.maxHeight = null;
} else {
content.style.maxHeight = content.scrollHeight + "px";
}
});
}
</script>

这是我的CSS：

.section_content {
max-height: 0;
overflow: hidden;
-webkit-transition: all 2s ease;
-moz-transition: all 2s ease;
-ms-transition: all 2s ease;
-o-transition: all 2s ease;
transition: all 2s ease;
}

隐藏div是有效的，它只是没有动画，而w3schools示例在我的safari浏览器中动画效果很好。我也试过Chrome，但没有什么不同。

一些设置信息：

• 浏览器：Safari 14(Chrome没有区别)
• Wordpress与Elementor一起构建页面
• 代码段插件注入JS

我已经尝试了我在网上找到的所有东西，但似乎没有什么能奏效。可能是我现在正在监督的某个明显的错误，所以我们非常感谢您的帮助！

Answer 1

您还没有提供完整的代码进行检查。但是检查下面的代码，我复制了你的代码并添加了其他代码。检查一下你是否发现了你丢失的东西。

var coll = document.getElementsByClassName("section_button");

var i;
for (i = 0; i < coll.length; i++) {
coll[i].addEventListener("click", function() {

var content = this.nextElementSibling;
if (content.style.maxHeight){
content.style.maxHeight = null;
} else {
content.style.maxHeight = content.scrollHeight + "px";
}
});
}

.section_content {
max-height: 0;
overflow: hidden;
-webkit-transition: all 2s ease;
-moz-transition: all 2s ease;
-ms-transition: all 2s ease;
-o-transition: all 2s ease;
transition: all 2s ease;
}
.content {
padding: 0 18px;
max-height: 0;
overflow: hidden;
transition: max-height 0.2s ease-out;
background-color: #f1f1f1;
}

<button class="section_button">Open Collapsible</button>
<div class="content">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>

Answer 2

所以事实证明Elementor覆盖了transform属性。由于我不需要Elementor转换样式，我只使用!important来强制使用Elementors:

.section_content {
max-height: 0;
overflow: hidden;
-webkit-transition: all 0.5s ease !important;
-moz-transition: all 0.5s ease !important;
-ms-transition: all 0.5s ease !important;
-o-transition: all 0.5s ease !important;
transition: all 0.5s ease !important;
}

我想我得用检查员更好的