使覆蓋緩慢淡出？

Question

我目前正在編輯reddit.com上的subreddit，並且我的方法受限於僅限於CSS。 當您將鼠標懸停在左側的菜單上時，我設法獲得疊加效果。它正在消失，但我不知道如何淡出它。由於轉換不起作用我嘗試了另一種動畫方法。

TL; DR：覆蓋淡入：是 - 淡出：不:(

下面是我使用的代碼的某些部分：

#sr-header-area .drop-choices:hover:before { 
    content: ""; 
    font-size: 13px; 
    display: block; 
    position: fixed !important; 
    height: 100%; 
    width: 100%; 
    margin-left: 300px; 
    pointer-events: none; 
    z-index: 700 !important; 
    animation: fade 0.5s ease; 
    -webkit-animation-fill-mode: forwards; 
    animation-fill-mode: forwards;} 

@keyframes fade { 
    0% {background-color: rgba(0, 0, 0, 0);} 
    100% {background-color: rgba(0, 0, 0, 0.4);}} 

也許有人可以幫助我在這裏

Answer 1

你應該能夠通過轉換實現這種效果，這將是我個人推薦的方式。下面快速實施：https://jsfiddle.net/z1c8bvcd/1/

要記住的主要事情是，您需要定義一旦懸停狀態不再有效時div將返回的CSS屬性，而不僅僅是當它們懸停時它們看起來像什麼：否則：before僞元素將從DOM。

#foo:before { 
    content: ""; 
    background: rgba(255, 255, 255, 0); 
    transition: background 0.5s, margin-left 0.5s; 
    width: 100%; 
    height: 100%; 
    position: fixed!important; 
    margin-left: 50px; 
} 

#foo:hover:before { 
    background: rgba(0, 0, 0, 0.3); 
    margin-left: 300px; 
} 

我想你也可以使用關鍵幀達到類似的效果，但我認爲當頁面加載，然後每當DIV懸停動畫將運行一次。