在 parent 悬停过渡后显示 child

Question

我这里有问题。我需要在通过悬停增加 parent 元素的大小后出现“sidebar-buttons”。 gif w/ my problem

按钮有显示 none 并且在我将 sidebar-list-item 悬停后它们的显示变为 flex，所以我需要在更改 sidebar-list-item 高度和背景后显示此更改。

这是我的代码：

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;
}

Answer 1

您需要为它的高度设置动画。

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

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

编辑： 更新了代码片段，将按钮动画上的过渡延迟属性添加到容器动画后运行 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>

在 parent 悬停过渡后显示 child

show child after parent hover transition

html

css

hover

css-transitions

transition