javascript - 如果打开导航栏，则添加过渡到背景颜色更改

Question

我怎样才能给它添加一个过渡，让它在 1 秒内慢慢变暗？ Atm 颜色变化是即时的:

$(function() {
    $('.navbar-toggle').on('click', function() {
        $('body').toggleClass('menu-open');
    })
});

CSS:

body.menu-open:after {
    content: '';
    display: block;
    position: fixed;
    top: 0; bottom: 0; left: 0; right: 0;
    width: 100%;
    height: 100%;
    z-index: 1000;
    background: rgba(0,0,0,0.7);

}

Answer 1

为了转换更改，您必须更改可转换的属性。

您当前的代码正在应用该类时创建一个 sudo 元素。

相反，在 body 上创建 sudo 元素，并在添加类时更改其背景和可见性:

$(function() {

  $('.show').on('click', function() {
        $('body').toggleClass('menu-open');
    });
});

body:after{
     content: '';
    display: block;
    position: fixed;
    top: 0; bottom: 0; left: 0; right: 0;
    width: 100%;
    height: 100%;
    z-index: 10;
    background-color: rgba(0,0,0,0.0);
    visibility:hidden;
    transition: background-color 1s;
}
body.menu-open:after{
      background-color: rgba(0,0,0,0.8);
      visibility:visible;
}
.show{
  display:inline-block;
  background-color:#ffffff;
  border:1px solid;
  padding:15px;
  position:relative;
  z-index:20;
  cursor:pointer;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<div  class="show">Toggle</div>