在父悬停过渡后显示子

Posted 2023-03-06

【中文标题】在父悬停过渡后显示子

【英文标题】：show child after parent hover transition

【发布时间】：2021-08-31 05:15:34

【问题描述】：

我这里有问题。通过悬停增加父元素的大小后，我需要出现“侧边栏按钮”。 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"
            
            
        />
    </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;
 

【问题讨论】：

你使用了transition-delayed属性吗？

@JeetViramgama 是的，尝试将其添加到 .sidebar-list-item:hover .sidebar-buttons 并没有帮助我

【参考方案1】：

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

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

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

编辑：更新了sn-p，在按钮动画上添加了transition-delay属性以在容器动画后500ms运行。

.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"
            
            
            
        />
    </div>
    <div class="sidebar-buttons">
        <button class="sidebar-button-buy" onclick="#">Купить</button>
        <button class="sidebar-button-how" onclick="#">Как выбрать?</button>
    </div>
</div>

【讨论】：

不，兄弟，我需要孩子（侧边栏按钮）在父母结束悬停过渡后出现

@gftx 更新了 sn-p，在按钮动画上添加了 transition-delay 属性以在容器动画后运行 500ms。

这几乎是我需要做的，但没有。我需要按钮在高度增加到最后 500 毫秒后出现

所以，只需将容器的高度设置为正常和：悬停状态，更新sn-p。