如何创建不同的过渡/动画延迟？

Question

我有一个 div，里面有另外两个 div，它们是绝对定位的，并且有一个过渡属性。

鼠标悬停时，我需要通过更改 bottom 属性来移动第一个 div，并通过更改 [=] 显示第二个（默认情况下不透明度为 0） 13=] 到 1.

问题是文本显示在彼此之上，所以我需要第二个元素等待第一个元素的过渡，当鼠标离开包装器时相反，所以我给了一个过渡延迟第二个元素，这是固定的。但是仍然存在一个问题，当鼠标离开框时，因为过渡延迟，第二个元素保持可见一段时间，而第一个元素移回其初始位置。

.wrapper{
    position: relative;
    width: 200px;
    height:300px;
    background-color: #777;
}

.title{
    position: absolute;
    bottom: 10px; /* becomes 120px on hover */
    transition: bottom .6s ease;
}

.wrapper:hover .title{
    bottom: 120px;
}

.text{
    position: absolute;
    bottom: 10px;
    opacity: 0; /* becomes on hover 1 */
    transition: opacity .6s ease .6s; /* added transition delay to wait for the first element to go up */
}

.wrapper:hover .text{
    opacity: 1;
}

  <div class="wrapper">
      <div class="title">My title</div>
      <div class="text">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Facilis, a.</div>
  </div>

是否有一些解决方法（没有 javascript）？

Answer 1

您可以覆盖悬停时的过渡延迟以反转效果：

.wrapper{
    position: relative;
    width: 200px;
    height:400px;
    background-color: #777;
}

.title{
    position: absolute;
    bottom: 10px; /* becomes 120px on hover */
    transition: bottom .6s ease .6s;
}

.wrapper:hover .title{
    bottom: 120px;
    transition: bottom .6s ease;
}

.text{
    position: absolute;
    bottom: 10px;
    opacity: 0; /* becomes on hover 1 */
    transition: opacity .6s ease 0s; /* added transition delay to wait for the first element to go up */
}

.wrapper:hover .text{
    transition: opacity .6s ease .6s;
    opacity: 1;
}

<div class="wrapper">
      <div class="title">My title</div>
      <div class="text">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Facilis, a.</div>
  </div>

如何创建不同的过渡/动画延迟？

How to create different transition / animation delay?

html

css

css-transitions

css-animations