在父悬停过渡后显示子项

如何解决在父悬停过渡后显示子项

我这里有问题。我需要在通过悬停增加父元素的大小后出现“侧边栏按钮”。 gif w/ my problem

按钮没有显示，在我将侧边栏列表项悬停后，它们的显示更改为 flex，因此我需要在更改侧边栏列表项高度和背景后显示此更改。

这是我的代码：

• html：

<div class="sidebar-list-item">
    <div class="sidebar-main-items">
        <div>Стретч-плёнки</div>
        <img
            src="./assets/icons/sidebar/paper-icon.svg"
            width="32"
            alt="paper icon"
        />
    </div>
    <div class="sidebar-buttons">
        <button class="sidebar-button-buy" onclick="#">Купить</button>
        <button class="sidebar-button-how" onclick="#">Как выбрать?</button>
    </div>
</div>

• css：

.sidebar-list-item {
    font-weight: 500;
    font-size: 14px;
    min-height: 75px;
    height: 100%;
    display: flex;
    align-items: center;
    color: black;
    border-bottom: 1px solid #f9f9f9;
    transition: all 0.5s ease-in-out;
}

.sidebar-list-item:hover {
    display: block;
    min-height: 114px;
    background-color: #ffca3a;
}

.sidebar-list-item:hover .sidebar-buttons {
    display: flex;
}

.sidebar-list-item:hover .sidebar-main-items img {
    opacity: 1;
} 

解决方法

你需要的是动画它的高度。

首先，将内容的高度设置为自动。 其次，在按钮容器中，设置 max-height:0 和 overflow:hidden。 第三，将按钮容器设置为 max-height:200px。

会发生什么？ 即使容器较小，css will 动画也需要 400 毫秒才能达到 500 像素，因此请考虑测试较小的值，以便按钮动画不会在主容器动画之前完成。

编辑： 更新了代码片段，添加了按钮动画的 transition-delay 属性以在容器动画后 500 毫秒运行。

.sidebar-list-item {
    font-weight: 500;
    font-size: 14px;
    height: 50px;
    display: block;
    align-items: center;
    color: black;
    border-bottom: 1px solid #f9f9f9;
    transition: all 0.5s ease-in-out;
    padding:10px 0;
    transition-delay: 500ms;
}

.sidebar-list-item:hover {
    transition-delay: 00ms;
    background-color: #ffca3a;
    height:60px;
}

.sidebar-list-item:hover .sidebar-main-items img {
    opacity: 1;
} 

.sidebar-list-item:hover .sidebar-buttons {
    max-height:150px;
    transition: all 0.5s ease-in-out;
    transition-delay: 500ms;
}

.sidebar-buttons{
  transition: all 0.5s ease-in-out;
  display: flex;
  max-height:0;
  overflow:hidden;
}

<div class="sidebar-list-item">
    <div class="sidebar-main-items">
        <div>Стретч-плёнки</div>
        <img
            src="./assets/icons/sidebar/paper-icon.svg"
            width="32"
            height="32"
            alt="paper icon"
        />
    </div>
    <div class="sidebar-buttons">
        <button class="sidebar-button-buy" onclick="#">Купить</button>
        <button class="sidebar-button-how" onclick="#">Как выбрать?</button>
    </div>
</div>