CSS懸停轉換 - 如何刪除延遲？

我不敢相信我遇到了一個基本的過渡問題......但是，唉，我是。我實際上找不到這個問題的另一個帖子，所以我的代碼中肯定有一些特別的錯誤。CSS懸停轉換 - 如何刪除延遲？

我做的，最大高度的一個簡單的過渡，這樣，當你將鼠標懸停在一個菜單項，子菜單向下滑動，就像這樣：

ul.sidenav ul { 
    padding:0; 
    margin:0; 
    list-style:none; 
    max-height:0; 
    overflow:hidden; 
    transition:max-height 1s ease-in-out; 
    } 

ul.sidenav > li:hover > ul {max-height:999px;}

這適用於鼠標懸停很好，但鼠標沒有一個明顯的延遲，在它回退之前。我已經嘗試了各種緩入/緩出設置，並且我嘗試添加一個單獨的時間到鼠標懸停。但是這種延遲仍然存在

這是怎麼回事？下面是該問題的一個小提琴： http://jsfiddle.net/t5Wv2/8/

來源

2014-02-17 LBF

這裏的問題是你有ul.sidenav > li:hover > ul設置爲max-height: 999px

當鼠標移開，它正在一秒鐘由999px的max-height過渡到0px -you're剛沒有看到它發生。

將max-height更改爲更接近實際高度的值（即99px），將transition-duration降低爲0.25s，您將看到不同。

ul.sidenav ul { 
    transition:max-height 0.25s ease-in-out; 
} 

ul.sidenav > li:hover > ul {max-height:99px;}

請記住，如果你添加更多的子菜單項和高度超過99px，溢出將被隱藏，所以你必須增加max-height以顯示隱藏的項目。

來源

2014-02-17 17:21:20 jonsuh

噢！當然。這是完全有道理的，我甚至沒有考慮它將如何從999倒數到「0」。謝謝。這解決了它。 – LBF

歡迎！不幸的是，它不足以知道內部元素的實際高度，所以它只知道從設置的最大高度過渡。 – jonsuh

Updated fiddle

修復延遲溶液：

將立方貝塞爾（0，1，0，1），用於元件過渡函數。

.text { 
    overflow: hidden; 
    max-height: 0; 
    transition: max-height 0.5s cubic-bezier(0, 1, 0, 1); 
    &.full { 
    max-height: 1000px; 
    transition: max-height 1s ease-in-out; 
}

來源

2016-08-23 14:57:31

CSS懸停轉換 - 如何刪除延遲？

回答

相關問題