是否可以在“状态”之间使用具有不同延迟切换的 CSS3 转换?例如,我试图让一个元素在悬停时立即更高,然后在“mouseout”上等待一秒钟,然后再滑回元素的初始高度。
演示页面: jsfiddle.net/RTj9K(在右上角悬停黑框)
CSS: #bar { transition:.4s ease-out 0, 1s; }
我认为最后的时间安排与延迟有关,但它似乎并没有像我想象的那样工作。
是否可以在“状态”之间使用具有不同延迟切换的 CSS3 转换?例如,我试图让一个元素在悬停时立即更高,然后在“mouseout”上等待一秒钟,然后再滑回元素的初始高度。
演示页面: jsfiddle.net/RTj9K(在右上角悬停黑框)
CSS: #bar { transition:.4s ease-out 0, 1s; }
我认为最后的时间安排与延迟有关,但它似乎并没有像我想象的那样工作。
如果你想在 和 上设置不同的 CSS 转换延迟hover
,mouseout
你必须使用相关的选择器来设置它们。在下面的示例中,当元素悬停时,悬停的初始延迟为,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>;
这是一个简化的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;
}
/* 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" */