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

所以你需要将身体选择器更改为：

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/

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

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" );
    });
});

通过背景（rgba）在正文上添加叠加：在单击侧边栏并运行动画之后

4 个答案: