叠加过渡

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。然后，当人们点击汉堡包图标时，我会在div中添加一个类，将其左侧位置设置为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

即可

＆＃13;

＆＃13;

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

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

＆＃13;

<div>transition on hover</div>

＆＃13;

＆＃13;

＆＃13;