使用css和javascript淡出元素会在页面中留下空白

我尝试使用普通的javascript而不是jQuery，并使用css和js淡出一个元素

我的css：

.fade-out {
    visibility: hidden;
    opacity: 0;
    transition: visibility 0s 2s, opacity 2s linear;
}

js：

        const approveBox = document.querySelector('.dashboard-list-box');
        approveBox.classList.add('fade-out');

这是可行的，但问题是当元素淡出时，它会在页面上留下一个大洞，而不是像使用jQuery fadeOut（）那样将下面的内容向上移动

如果替换可见性：隐藏为

display: none

---

然后它会立即消失而不褪色。有办法解决这个问题吗？

在动画完成后将高度设为0。或者在css淡出中添加高度：0class@MustKeemJ，谢谢你。问题是，在过渡完成之前，高度变为0，这看起来不太好