有沒有辦法在translate3d上懸停時發生一個平滑的動畫？

我有一個右側菜單（綠色）CSS佈局。
菜單的主要部分默認隱藏在視口之外。
將鼠標懸停在右側菜單上：短暫延遲後，菜單完全轉換爲視口（經過一段時間後）。
在鼠標右鍵菜單上：菜單應該轉回到其初始位置（無延遲）。

見本JsFiddle綠色菜單：嘗試徘徊綠色菜單有沒有辦法在translate3d上懸停時發生一個平滑的動畫？

下面是相關的CSS代碼：

section#base-layer section#base-layer-contact-bar { 
    position: absolute; 
    box-sizing: border-box; 
    top: 60px; 
    right: -90px; 
    width: 150px; 
    height: calc(100% - 60px); 
    transform: translate3d(0, 0, 0); 
    transition: transform 0.6s ease-in; 
    background-color: green; 
} 
section#base-layer section#base-layer-contact-bar:hover { 
    transform: translate3d(-90px, 0, 0); 
    transition-delay: 1s; 
}

要重現：將鼠標移出的當動畫處於其初始狀態時，意思是綠色的部分，意思是在它達到其完整擴展之前。

有沒有辦法讓一個流暢的動畫總是發生？
我的CSS有問題嗎？
這甚至可能嗎？
如果是的話，是否只有一個CSS的解決方案，或者我必須採取不同的路徑？

注意我使用Ubuntu上的Chrome V45。

來源

2015-10-22 Sebastien Lorber

我不能看到說對你的jsfiddle動畫，也許你錯過了描述有什麼事？像描述 – AGE

@AGE，動畫是綠色的菜單上，它一點點延遲（故意）後踢 –

我看不到任何閃爍，當菜單打開，動畫完成之前，您移動鼠標意思菜單跳出綠色部分跳回位置？如果不是，我不知道你的意思 – MMachinegun

起初我無法重現您的問題。

的唯一可靠方法是，當我申請更改您的小提琴，打run跳開始發生。

當您在「新鮮」負載下來到您的小提琴（重新加載頁面）時，跳躍不會發生。或者非常非常偶爾，如果您始終快速移動鼠標（這是而不是正常用戶行爲）。

所以我猜，而當你更改應用到你的CSS開發這個問題可能會發生，但除此之外，這不應該發生。

我希望這會有所幫助:)

來源

2015-10-22 15:28:29 MMachinegun

我每次都能真正重現它，這是奇怪的行爲考慮您的發言 – AGE

是的，我可以複製它每次也和weither或不正常的行爲，它會發生真正的用戶，而不是性感UX –

嗯，怪異。那麼，我剛開始有問題再現，這就是我的管理方式。另一件事提的是，你的CSS是有點過sprecific，但也許這只是你的榜樣 – MMachinegun

以下這些對我有用。我只是刪除#base-layer-contact-bar上的transform: translate3d(0, 0, 0)。

參見：https://jsfiddle.net/wuacxfn1/1/

section#base-layer section#base-layer-contact-bar { 
    position: absolute; 
    box-sizing: border-box; 
    top: 60px; 
    right: -90px; 
    width: 150px; 
    height: calc(100% - 60px); 
    /* transform: translate3d(0, 0, 0); < remove this */ 
    transition: transform 0.6s ease-in; 
    background-color: green; 
}

問題是，我真的不知道爲什麼它工作！也許比我聰明的人可以給我們提供答案？

FWIW，this version使用translateX也爲我工作。你的旅費可能會改變。

來源

2015-10-22 16:16:00 Moob

我曾與兩個版本跳：「（ –

@SebastienLorber這是令人沮喪的，你可以看看這個的jsfiddle：HTTPS： //jsfiddle.net/wuacxfn1/2/我已經使用JS來切換.hover類，但延遲刪除。它是否顯示相同的問題給你？我不是在提議它作爲一個解決方案 - 只是做一些偵探工作 – Moob

是的，我也有這個問題，看起來'：hover'不是這裏的問題 –

有沒有辦法在translate3d上懸停時發生一個平滑的動畫？

回答

相關問題