css3转换：不同的时间值，当：hover in in out？ [英] css3 transition: different time value when :hover In than Out?

问题描述

基本上，当项目被悬停时，我尝试有不同的过渡时间，而不是当项目是鼠标悬停时。

  bar {position：fixed; bottom：-25px; } / *这里你只能看到一块吧* / 
 
 #bar：hover {transform：.2s linear; bottom：0; } 
  

以及

  / *这只代表我的状态覆盖了我需要* / 
 #bar：mouseLeaved {transform：2s linear} 
  pre> 
 
 
这种方式需要0.2秒显示和2秒隐藏。
 
 
 
 
解决方案
我建议这样做：
  #bar {transition：2s linear; } 
 #bar：hover {transition：.2s linear; } 
  
然后，让CSS的顺序为你处理事情：当hover生效将覆盖另一个）。
 
 
 
此处的演示： http：// jsfiddle。 net / jfriend00 / Hufxa /  
 
Basically i am trying to have different transition time when the item is hovered than when the item is mouse leaved,
#bar{ position:fixed; bottom:-25px; }  /*here you only get to see a piece of the bar    */

#bar:hover{ transform: .2s linear; bottom:0; }
And something like
/*this only represents my made out status to cover what i need*/
#bar:mouseLeaved{ transform: 2s linear }
This way it would take .2 seconds to be shown and 2 seconds to be hidden

Can i do this with no need of javascript?
解决方案
I'd suggest this:
#bar { transition: 2s linear; }
#bar:hover { transition: .2s linear; }
And, let the ordering of the CSS handle things for you when :hover is in effect (it will override the other).

Working demo here: http://jsfiddle.net/jfriend00/Hufxa/

                        
这篇关于css3转换：不同的时间值，当：hover in in out？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！