如何用JavaScript实现一个动态且美观的页面侧边栏效果？

本文共计1882个文字，预计阅读时间需要8分钟。

实际效果大致是这样的：，也许是我当时看到这种效果时的真实感受。因为第一个回应是：还可以把整个page整体移出页面吗？发现：display动画的应用，以及整体事件的原因是什么呢？在笔中。

其实效果大概是这样的：

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

发现：display动画的应用

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

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

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