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

Question

我在其中有一个div，其中有两个Div，其位于绝对且具有过渡属性。

在鼠标悬停的情况下，我需要通过更改bottom属性来移动第一个DIV，并通过将opacity更改为1。

来显示第二个（默认情况下具有不透明度0）。

问题在于，文本彼此之间显示出来，所以我需要第二个元素等待第一个元素的过渡和鼠标离开包装器时的倒数，所以我给了第二个元素的过渡延迟，哪种修复了这一点。但是，当鼠标由于过渡延迟而离开框时仍然存在问题，第二个元素可以看到一段时间，而第一个元素移回了其初始位置。

.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>