jquery - 向正文 :after when sidebar is clicked and run animation 上的背景 (rgba) 添加叠加层

Question

因此，当单击侧边栏时，我试图通过我网站主体上的背景(rgba)转换 css3 覆盖。我已经让它工作了(参见 fiddle - 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

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

要使其正常工作，您需要确保 :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);
}

还有一个工作 fiddle :https://jsfiddle.net/vh3pmrzu/