show child after parent hover transition

Question

I have a problem here. I need the "sidebar-buttons" to appear after increasing the parent element's size by the hover. gif w/ my problem

buttons have display none and after I hovering my sidebar-list-item their display change to flex, so I need this change appear after changing sidebar-list-item height and background.

here is my code:

• 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

What you need is animate the height of it.

First, set the heigth of content as auto. Second, in buttons container, set max-height:0 and overflow:hidden. Third, animate the buttons container to max-height:200px.

What happens? The css will animation will take 400ms to reach 500px even if the container is smaller, so consider testing smaller values so the button animation doesn't finish before the main container animation.

Edit: Updated the snippet, added the transition-delay property on button animation to run 500ms after container animation.

.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>