覆蓋層上的轉換

Question

我有一個左側菜單，當用戶點擊漢堡時，它會滑入。它的背後是一個具有以下SCSS覆蓋：

.overlay { 
    background-color: $glb-nav-80-opacity-white; 
    position: fixed; 
    left: 0; 
    right: 0; 
    top: 0; 
    bottom: 0; 
    z-index: 200; 
    cursor: pointer; 
} 

.left-menu { 
    background: $glb-nav-dark-blue; 
    position: fixed; 
    overflow-x: hidden; 
    overflow-y: auto; 
    margin: 0; 
    padding: 0; 
    -webkit-transition: all 0.3s ease; 
    -moz-transition: all 0.3s ease; 
    transition: all 0.3s ease; 

    a:hover { 
     color: $glb-nav-white; 
    } 
} 

當人們點擊漢堡包菜單上，覆蓋突然出現了。我需要它淡入。我怎樣才能使用CSS？

這裏的HTML：

<div class="overlay"></div> 
<div class="left-menu"></div> 

當用戶打開left-menu有-284px左側位置的頁面。然後，當人們點擊圖標漢堡包，我一類添加到您的菜單做了設置其左側位置爲0

Answer 1

使用CSS轉換股利，即：

.overlay { 
    // other css 
    -webkit-transition: opacity 500ms ease; 
    -moz-transition: opacity 500ms ease; 
     -o-transition: opacity 500ms ease; 
      transition: opacity 500ms ease; 
} 

或者，如果使用SASS：@include transition(opacity 500ms ease);

注意，您可以設置定時和風格是你喜歡什麼，更在這裏：https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Transitions/Using_CSS_transitions

Answer 2

而不是增加一類，你可以設置使用jQuery的.CSS 例如不透明度：

$(".overlay").css({opacity:50}); 

復位的話，使用

$(".overlay").removeAttr("style"); 

使用CSS轉換像你一樣的菜單：

.overlay { 
    background-color: $glb-nav-80-opacity-white; 
    position: fixed; 
    left: 0; 
    right: 0; 
    top: 0; 
    bottom: 0; 
    z-index: 200; 
    cursor: pointer; 
    -webkit-transition: all 0.3s ease; 
    -moz-transition: all 0.3s ease; 
    transition: all 0.3s ease; 
} 

Answer 3

只需添加transition的疊加DIV

div { 
 
    /* -transition: 2 seconds- */ 
 
    -webkit-transition: width 2s; /* For Safari 3.1 to 6.0 */ 
 
    transition: 2s; 
 
    
 
} 
 

 
div:hover { 
 
    height: 200px; 
 
    background: red; 
 
}

<div>transition on hover</div>