html - 反转 CSS 悬停过渡的顺序

Question

我想在某些框上创建效果。在鼠标上必须出现一个叠加层，几分之一秒后出现标题，然后是副标题。到目前为止一切顺利，但我希望当我移开鼠标时，元素将按照它们进入时的相反顺序消失。我该怎么做？

.overlayPortfolio {
    background-color: rgba(255,255,255,0.8);
    opacity: 0;
    padding: 3em;
    position: absolute;
    top: 0px; bottom: 0px; left: 0px; right: 0px;
    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    transform-style: preserve-3d;
    -webkit-transition: all .3s ease-out;
    -moz-transition: all .3s ease-out;
    -o-transition: all .3s ease-out;
    transition: all .3s ease-out;
}

.overlayPortfolio h1 {
    color: #292929;
    opacity: 0;
    text-align: left;
    -webkit-transition: all .3s ease-out;
    -moz-transition: all .3s ease-out;
    -o-transition: all .3s ease-out;
    transition: all .3s ease-out;
    -webkit-transition-delay: 0.3s;
    transition-delay: 0.3s;
}

.sectionSubtitle {
    color: #292929;
    display: block;
    font-size: 0.875em;
    font-weight: 300;
    margin-top: 0.25em;
    text-align: left;
    -webkit-transition: all .9s ease-out;
    -moz-transition: all .9s ease-out;
    -o-transition: all .9s ease-out;
    transition: all .9s ease-out;
    -webkit-transition-delay: 0.9s;
    transition-delay: 0.9s;
}

如您所见，叠加层在 0.3 秒后出现，然后是标题，最后是副标题。在 mouseon 上一切正常，但在 mouseout 上所有都同时消失:(

出了什么问题？

Answer 1

因为我没有你正在使用的 html，所以我继续写了一个更简单的例子:

JSFiddle

html:

<div id="hoverable">
    <div id="e1"></div>
    <div id="e2"></div>
    <div id="e3"></div>
</div>

首先我们编写初始 CSS:

#hoverable {
    height:60px;
}
#hoverable * {
    width:30px;
    height:30px;
    float:left;
    background:black;
    transition: margin-top .3s ease-in-out;
}

#hoverable:hover * {
    margin-top:30px;
}

现在所有的盒子都有一个平滑的向下移动的过渡。

接下来，我们添加延迟:

#hoverable #e2 {
    transition-delay: .3s;
}
#hoverable #e3 {
    transition-delay: .6s;
}

最后，为了反转延迟，我们必须为悬停在 #hoverable 元素上的时间添加单独的样式。

#hoverable:hover #e1 {
    transition-delay: .6s;
}
#hoverable:hover #e3 {
    transition-delay: 0s;
}

这样一来，当您将鼠标悬停在该元素上时，它会使用间接过渡延迟，而当您将鼠标悬停在该元素上时，它会删除该样式，使其使用默认延迟。在这种情况下，由于 #e2 始终是第二个要移动的元素，因此它的延迟始终是 .3s。这只是反转 #e1 和 #e3

的延迟问题

此外，您的元素一次全部消失的原因是因为您的元素都在您要转换的第一个元素内。当您的父元素隐藏自身时，因为它包含子元素，它们会随之消失。如果他们不是第一元素的 child ，他们也不会一下子全部消失。仍然不会是相反的顺序。 =)

附带说明一下，您可以在 CSS 中简化一些事情。

如果您前往 transition page on CanIuse.com ，您可以看到几乎所有现代版本都没有供应商前缀。这意味着您不再需要执行 -webkit-、-moz- 和 -o- 操作。 =)

此外，我个人不喜欢使用 transition: all，因为很难明确地告诉您要过渡什么。我建议指定要转换的每一件事，例如:

transition: opacity .3s ease-in-out, color .3s ease-in-out, margin .3s ease-in-out;