js 点击侧边栏展示内容_JS实现页面侧边栏效果探究

其实效果大概是这样的：

而标题，也许是我当时看到这种效果时的真实感受。因为第一反应是：“还可以把page整体移出页面？”

发现：display动画的应用

整件事的起因是什么呢？在笔者最近为社团计划的官网上打算做一个这样的效果：点击头像，左边/右边滑出一个“面板”，里面展示用户的个人信息。

当然，这有很多种做法，比如：利用position定位+overflow溢出隐藏、利用opacity/visibility隐藏+pointer-events元素穿透… 但是笔者当时想到的是如何给”真正的隐藏，display“加上动画！

我们大概都知道的是：HTML渲染过程中有一个可能执行的、影响页面性能的“回流”和“重绘”的过程。导致这个过程被触发的原因有很多：元素位置移动、大小改变、增删节点以及这里要说的display显示与隐藏切换等等。而元素的变动需要页面快速的显示出来，所以在我们看来是“突兀”的。

而且有一点需要注意的是：浏览器是“有点智能”的 —— 它可以判断如果会触发页面回流的代码有很多，那么它会将这些代码都读取完再(合并)一起执行，所以这也是下面这段代码会有如下图效果的原因：

/** css代码 */

width: 50px;

height: 50px;

background-color: red;

<