鼠标悬停和移开时使用不同的CSS过渡延迟时间？

Question

是否可以在"状态"之间使用不同的延迟来切换CSS3过渡效果？例如，我正在尝试在悬停时立即使元素变高，然后在'mouseout'上等待一秒钟，然后滑动回元素的初始高度。

演示页面：jsfiddle.net/RTj9K（悬停在右上角的黑色框中）

CSS：#bar { transition:.4s ease-out 0, 1s; }

我认为末尾的时间是关于延迟的，但它似乎没有按照我想象的方式工作。

- Marcel

---

https://dev59.com/Gl8d5IYBdhLWcg3woDYZ - Uday Hiwarale

Answer 1

如果您希望在 hover 和 mouseout 上设置不同的CSS过渡延迟时间，您需要使用相应的选择器进行设置。在下面的示例中，当一个元素被悬停时，初始延迟时间为 0，但在 mouseout 上过渡效果需要延迟 1s。

/* These transition properties apply on "mouseout" */
#bar { transition:height .5s ease-out 1s; } 

/* These transition properties apply on hover */
#bar:hover { transition:height .5s ease-out 0s; }

您可以在我更新的演示中找到完整的CSS。我使用了简写的transition属性，值的顺序如下：

transition:<property> <duration> <timing-function> <delay>;

答案演示: http://jsbin.com/lecuna/edit?html,css,output

- Marcel

---

我看到的问题是，当你快速移开鼠标时，它会卡在中间，直到延迟消失。 - apieceofbart

@apieceofbart 你可以通过在 ontransitionend 监听器中有条件地应用另一个不设置 transition-delay 的类来解决这个问题。 - Oleg Vaskevich

@OlegVaskevich 实际上我在这里有一个类似的问题：https://stackoverflow.com/questions/40594931/reversible-transition-with-delay 有一个很好的答案 :) - apieceofbart

Answer 2

这里有一个简化的JSFiddle示例。基本上，你需要使用transition-delay属性：

#transform {
    height:40px;
    width:40px;
    background-color:black;
    transition: .4s ease-out; 
    transition-delay: 2s;
    /*or shorthand: transition: .4s ease-out 2s;*/
}

#transform:hover {
    transition: .4s ease-out; 
    width:400px;
}

- Dan Manastireanu

---

假设有两个元素。当鼠标悬停时，我希望第一个元素先出现，然后是第二个元素；然后当鼠标离开时，我希望第二个元素先消失，然后是第一个元素消失。但我真的无法理解...也不知道它是否能够正常工作。 - Ben

@Ben 发布一个问题，我会看一下。同时展示一些HTML代码。我认为你应该在每个元素上有不同的动画效果。在鼠标悬停动画中A的延迟应该小于B的延迟。在非悬停动画中则相反。附注：我不是专家……我只是摆弄它直到它起作用:) - Dan Manastireanu

Answer 3

/* These transition properties apply on "mouseout" */
#bar { transition:height .5s ease-out 1s; } 

/* These transition properties apply on hover */
#bar:hover { transition:height .5s ease-out 0; }

请注意，如果您没有输入“s”（秒）符号，则此方法将无法正常工作：

/* These transition properties apply on "mouseout" */
#bar { transition:height .5s ease-out 1s; } 

/* These transition properties apply on hover */
#bar:hover { transition:height .5s ease-out 0s; }   /* note "0s" */

- Nebojša Ložnjaković

---

在编程中，将“s”添加到“0”上的注释非常重要。我刚刚被它咬了一口，但是最终解决了问题。+1 - Sgnl