悬停和鼠标移动的不同CSS转换延迟？

Question

是否可以在"状态"之间使用不同的延迟切换来使用CSS3过渡？例如,我试图在悬停时立即将元素设置为更高,然后在'mouseout'上等待一秒钟,然后再滑回元素的初始高度.

演示页面: jsfiddle.net/RTj9K(在右上角悬停黑框)

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

我认为最后的时间与延迟相关,但它似乎并没有像我想象的那样工作.

Answer 1

如果你想在不同的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>;

回答演示:http://jsbin.com/lecuna/edit？html,css,output

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;
}