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

demo

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

希望对你有帮助

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

2 个答案:

demo