JavaScript 不会触发 CSS 转换

Question

我在这里查看了至少 10 个线程，但没有找到解决方案。 我正在尝试做的是使用应该由我的 JavaScript 代码触发的转换来更改高度属性。 但是，这并没有发生。

nav {
    background: rgb(242, 242, 242);
    border-radius: 0px 0px 15px 15px;
    display: none;
    height: 0px;
    margin-top: 68px;
    overflow: hidden;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 1;
    transition: height 1s ease;
}



var button = document.getElementsByTagName('button')[0];
var image = document.getElementsByTagName('img')[0];
var bar = document.getElementById('bar');
var nav = document.getElementsByTagName('nav')[0];
var clicks;

button.onclick = function() {
    if (clicks <= 0 || clicks === undefined || clicks === null) {
        nav.style.display = 'block';
        nav.style.height = 'auto';
        bar.style.borderRadius = '0px';
        image.src = 'assets/image/chevron-up.png';
        clicks++;
    }
    else {
        nav.style.display = 'none';
        nav.style.height = '0px';
        bar.style.borderRadius = '0px 0px 15px 15px';
        image.src = 'assets/image/menu-three-horizontal-lines-symbol.png';
        clicks = 0;
    }

}

为什么？我该如何解决这个问题？

Answer 1

由于 auto 值不可设置动画，请尝试通过 scrollHeight< 将 nav 的 height 设置为固定值 属性，然后它将动画化:

nav.style.height = nav.scrollHeight + 'px';

此外，由于您使用了 overflow: hidden，您实际上不需要切换显示值，并且可以简单地切换高度值，参见这个单独的示例:https://jsfiddle.net/andreekeberg/xt4pazfd/