在 body:单击侧边栏并运行动画后，在 body:之后添加通过背景 (rgba) 的叠加层

Question

所以我正在尝试在单击侧边栏时通过背景(rgba(在我的网站正文上转换css3覆盖层。我已经让它工作了(参见小提琴 - https://jsfiddle.net/tmbzdhwh/- (，但由于某种原因，我无法在超过 1 秒内制作动画背景。目前，它正在颠簸。我敢肯定这真的很简单，我只是看不到它。

<div class="sidebar">
<div class="sidebar-trigger">
    <div class="sidebar-arrow"></div>
</div>
<div class="sidebar-content">
    Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem.
</div>

测试

Answer 1

基本思想是您需要对线性值进行动画处理。您不能从无到有动画到位置固定的整页块。

要使其正常工作，您需要确保:after从一开始就存在(但不可见(。它的要点如下：

/* Animations */
body:after {
    transition: all 1s ease-in-out;
    content: '';
    height: 100%;
    width: 100%;
    position: fixed;
    top: 0;
    left: 0;
    background-color: rgba(0,0,0,0);
}
body.side-active:after {
    background-color: rgba(0,0,0,0.3);
}

这里有一个工作小提琴：https://jsfiddle.net/vh3pmrzu/

Answer 2

当侧边栏不在时，您没有设置 ：after 元素，因此它要么有一个，要么没有，并且它会弹出/消失(这意味着它不会被动画化(。此外，您正在尝试转换主体，而不是您的 ：after 元素。

因此，您需要将身体选择器更改为：

body:after {
    content: "";
    -webkit-transition: all 1s ease-in-out;
    -moz-transition: all 1s ease-in-out;
    -ms-transition: all 1s ease-in-out;
    -o-transition: all 1s ease-in-out;
    transition: all 1s ease-in-out;
    background-color: rgba(0,0,0,0);
}

检查此小提琴以获取工作示例：

https://jsfiddle.net/tmbzdhwh/2/

请注意，我还从body.side-active:after中删除了content: '';，因为它在上述更改后会重复自己。

Answer 3

问题是你看到的背景颜色实际上并不是身体改变的背景颜色，而是出现的::after伪元素：

body.side-active:after {
  content: '';
  height: 100%;
  width: 100%;
  position: fixed;
  top: 0;
  left: 0;
  background-color: rgba(0,0,0,0.3);
}

如果你想看到转换发生，删除CSS的那个块，然后从这里更改下一个：

body.side-active {
  background-color: rgba(0,0,0,0);
}

对此：

body.side-active {
  background-color: rgba(0,0,0,0.3);
}

如果需要将该::after元素用作叠加层，则需要在其上创建过渡效果

Answer 4

只需删除您在 css 中设置的背景颜色：

body.side-active {
    /*background-color: rgba(0,0,0,0);*/
}
body.side-active:after {
    content: '';
    height: 100%;
    width: 100%;
    position: fixed;
    top: 0;
    left: 0;
    /*background-color: rgba(0,0,0,0.3);*/
}

现在使用 JQuery animate 设置背景颜色：

$(function(){
var counter = 0;
// Toogle class on sidebar
    $( ".sidebar-trigger" ).click(function() {
    if(counter==0) {
        $('body, .sidebar').css({"backgroundColor": "rgba(0,0,0,0.3)"});
    counter=1;
    }
    else {
        $('body, .sidebar').css({"backgroundColor": "rgba(0,0,0,0)"});
    counter=0;
    }
    $('body, .sidebar').toggleClass( "side-active" );
    });
});