针对悬停和mouseout的不同CSS转换延迟？ [英] Different CSS transition-delays for hover and mouseout?

问题描述

有可能使用CSS3转换，在状态之间有不同的延迟切换吗？例如，我试图使元素在悬停时立即更高，然后在mouseout上等待一秒，然后再滑回元素的初始高度。

Is it possible to use CSS3 transitions with a different delay switching between "states"? For example, I'm trying to make an element immediately higher upon hover then on 'mouseout' to wait a second before sliding back to the element's initial height.

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

Demo page: jsfiddle.net/RTj9K (hover black box in top-right corner)

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

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

我认为结束时间与延迟有关，但似乎没有像我想象的那样工作。

I thought the timings on the end related to delay but it doesn't seem to be working the way I'd imagined.

推荐答案

如果您希望 hover 和 mouseout ，您必须使用相关的选择器来设置它们。在下面的示例中，当元素被悬停时，悬停时的初始延迟为 0 ，但在 mouseout 延迟 1s 。

If you want different CSS transition delays on hover and mouseout, you have to set them using the relevant selectors. In the example below, when an element is hovered, the initial delay on hover is 0 but on mouseout the transition is delayed by 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。我使用了速记的转换属性，值的顺序是：

You can find the full CSS in my question's updated demo below. I've used the shorthand transition property, the order of the values are:

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

这篇关于针对悬停和mouseout的不同CSS转换延迟？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！