CSS3：在转换转换时防止转换延迟

Question

我正在尝试创建一个效果，其中：

• 光标悬停在一个方框上
• 酒吧滑出
• 当滑动动作缓和时，出现标题
• 光标离开框
• 当酒吧向后滑动时，标题开始消失
• 酒吧完成向后滑动

但是当光标离开框时，再次调用延迟，因此标题会逐渐消失，因为条形图完成它的过渡，看起来很难看。 我怎样才能达到预期的效果？

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

演示

Answer 2

如果我理解了这些说明，请尝试在同一元素上应用转换...就像这样

HTML

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

CSS

.slidingbar{
    border: 1px solid #cccccc;
    height: 50px;
}

.slidingbar-content{
    width: 50px;
    margin: 0px;
    white-space: nowrap;
    overflow: hidden;
    opacity: 0;
    transition: opacity 1.5s, width 2s ;
    -webkit-transition: opacity 1.5s, width 2s;
}

.slidingbar-content:hover{
    width: 100%;
    opacity: 1;
}

希望它对你有所帮助