Question

我在这里查看了至少10个线程，但没有找到解决方案。我想做的是通过过渡更改height属性，该过渡应该由我的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的值不可设置动画，请尝试通过其height属性将nav的{{1}}设置为固定值，然后它将设置动画：< / p>

scrollHeight

此外，由于您使用nav.style.height = nav.scrollHeight + 'px';，因此您实际上不需要切换显示值，并且可以简单地切换高度值，请参见以下隔离示例：https://jsfiddle.net/andreekeberg/xt4pazfd/

JavaScript不会触发CSS转换

1 个答案: