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

Question

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

在鼠标悬停时，我需要通过更改 bottom 属性来移动第一个 div，并通过将 opacity 更改为显示第二个(默认情况下不透明度为 0) 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>