Question

我有一个div，其中有两个其他div，它们的位置都是绝对的并具有transition属性。

在鼠标悬停时，我需要通过更改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>

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

1 个答案: