html - CSS3 : Prevent transition-delay when transition is reversed

Question

我正在尝试创建一种效果:

• 光标悬停在一个框上
• 横杆滑出
• 随着滑动 Action 缓和，标题出现
• 光标离开方框
• 随着栏向后滑动，标题开始消失
• 横杆完成向后滑动

但是，当光标离开框时，会再次调用延迟，因此标题会在栏结束时淡出，它会过渡回来，这看起来很难看。怎样才能达到预期的效果？

HTML:

<div class="slidingbar">
    <h1 class="slidingbar-content" id="title">My Awesome Web App</h1>
</div>

CSS:

.slidingbar{
    width: 50px;
    height: 50px;
    transition: width 2s;
    -webkit-transition: width 2s;
}

.slidingbar .slidingbar-content{
    margin: 0px;
    opacity: 0;
    white-space: nowrap;
    overflow: hidden;
    transition: opacity 1s 1s;
    -webkit-transition: opacity 1s 1s;
}

.slidingbar:hover{
    width: 100%;
}

.slidingbar:hover .slidingbar-content{
    opacity: 1;
}

Answer 1

您可以在基本状态和悬停状态下设置不同的过渡。

在这种情况下，延迟应该只在悬停状态下，而基本状态应该是不延迟的。

.slidingbar .slidingbar-content{
    margin: 0px;
    opacity: 0;
    white-space: nowrap;
    overflow: hidden;
    -webkit-transition-property: opacity;
    -webkit-transition-duration: 0.5s;
    -webkit-transition-delay: 0s;
    -webkit-transition-timing-function: linear;
    transition-property: opacity;
    transition-duration: 0.5s;
    transition-delay: 0s;
    transition-timing-function: linear;
}

.slidingbar:hover .slidingbar-content{
    opacity: 1;
    transition-delay: 1.5s;
    -webkit-transition-delay: 1.5s;
}

demo