Question

我该如何添加过渡效果，使其在1秒钟内逐渐变暗？自动取款机的颜色变化是即时的：

$(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元素。

相反，在主体上创建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>

Answer 2

尝试一下：

...{background-color: rgba(0,0,0,0.7);}
...{-webkit-transition: background-color 1s; /* Safari */
transition: background-color 1s;}

您可能需要在不存在该类时定义背景颜色和过渡效果。

Answer 3

您可以尝试将css过渡添加到要将click事件附加到的元素上，在这种情况下为'.navbar-toggle'：

-webkit-transition：所有.3s线性0；过渡：所有.3s线性0s;

然后将新的颜色/阴影添加到您要切换的类中（“菜单打开”）。

Answer 4

您可能正在为transition设置CSS规则-请参阅：https://www.w3schools.com/Css/css3_transitions.asp

一个简单的规则可能是添加：

transition: all 1s;

将在1s的时间内为所有可动画的变化设置动画。

为确保精美的CSS功能与尽可能多的现代浏览器一起使用，您可能还需要添加前缀。可以访问caniuse.com或使用https://autoprefixer.github.io/之类的网站来确保您的代码尽可能广泛地兼容。

请注意，并非每个CSS属性和值都可以设置动画，因此您可能需要为该属性设置默认值以使其从其过渡。

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

4 个答案: