javascript - 为什么隐藏一个元素后有一个空白空间？

Question

在标题中我尝试做一个下拉菜单，但是有一个问题——在隐藏状态下，有一个空白区域。如何在不使用属性 display: none 的情况下修复它(因为在这种情况下无法使用动画)？如果我将页眉底部 (bottomNavBar) 设置为固定高度，那么在小尺寸屏幕上就会出现问题。

return (
    <div className={`${style.bottomNavBar}`}>
        <Container fluid={true} className={style.container}>
            <Row>
                <Col sm={12} md={2}>
                    <div className={style.allCategories} onClick={() => openCloseTabs()}>
                        <h5>Все категории</h5>
                    </div>
                </Col>
                 <Col sm={12} md={10}>
                    <SimpleSlider/>
                </Col>
            </Row>
        </Container>
        <div className={`${style.tabsPanel} ${tabsPanelVisible ? style.tabsPanelOpen : style.tabsPanelHidden}`}>

        </div>
    </div>
)
};

CSS:

    .bottomNavBar {
        background-color: rgb(50, 148, 63);
    }
    .container {
    }
    .allCategories {
        color: white;
        text-align: center;
        padding: 14px 16px;
        text-decoration: none;
        cursor: pointer;
    }
    .allCategories:hover {
        text-shadow: 4px 4px 2px rgba(255, 255, 255, 0.6);
    }  
   .tabsPanel {
        min-height: 200px;
        border: 5px solid rgb(50, 148, 63);
        background-color: grey;
        width: 100%;
    }
    .tabsPanelHidden {
        height: 0;
        overflow: hidden;
        visibility: hidden;
        opacity: 0;
        transform: translate3d(0, -30px, 0);
        transition: visibility 0s ease-in .15s, opacity .15s ease-in, transform .15s ease-in;
    }
    .tabsPanelOpen {
        visibility: visible;
        opacity: 1;
        transform: translate3d(0, 0, 0);
        transition: visibility 0s ease-out, opacity .25s ease-out, transform .25s ease-out;
    }

Answer 1

那是因为你正在使用 visibility:hidden; 你应该使用 display: none; 请花一点时间阅读 this question 上的差异