本文主要介绍JS实现页面侧边栏效果查询，本文通过示例代码详细介绍了你，对你的学习或者工作有一定的参考价值，有需要的朋友可以参考一下。
目录
发现：显示动画的应用
实现：如何实现第一次演示的效果
事实上，效果大概是这样的：
而题目可能就是我看到这个效果时的真实感受。因为第一反应是：“能不能把整页移出页面？”
发现：显示动画的应用
整件事的起因是什么？我打算在作者最近为社区规划的官网上做这样一个效果：点击头像，会有一个“面板”从左/右侧滑出，显示用户的个人信息。
当然，有很多方法可以做到这一点，比如使用位置来定位溢出和隐藏指针事件元素穿透，以及使用不透明度/可见性……但是我当时想的是如何制作真正的隐藏，display的动画！
众所周知，HTML渲染时可能会执行一个“回流”和“重绘”的过程，影响页面的性能。导致这个过程被触发的原因有很多：元素位置移动，大小改变，节点的添加和删除，以及在这里显示和隐藏之间的切换。元素的变化需要在页面上快速显示，所以在我们看来是“突兀”的。
还有一点需要注意的是，浏览器是“有点智能”的——。它可以判断，如果有很多代码触发页面回流，它就会将这些代码都读取完再（合并）一起执行，所以这就是为什么下面的代码会有如下所示的效果：
/** css代码*/
宽度： 50px；
height: 50px
背景色：红色；
display:无；
transform : Translatex(0)；
过渡all .6s ease//好像没用？
//js代码
ds . style . display=' block '；
ds . style . transform=' Translatex(100px)'；
但是同样的，在操作以下属性时，由于浏览器的渲染机制，有一些API可以强制页面进行渲染(因为需要获取详细准确的信息)。包括offsetTop、offsetLeft、offsetWidth、offset heart、scrollTop、scrollLeft、scrollWidth、scrollHeight、clientTop、clientLeft、clientWidth、clientHeight、getcomputed style()(ie中的当前样式)。这直接导致第一、第二行相当于“渲染两次”。
因此，将上面的js代码更改为：
//js代码
ds . style . display=' block '；
ds.offsetHeight
ds . style . transform=' Translatex(100px)'；
就这么干吧
目前csdn官网PC眨眼发布页面已经使用了类似的功能进行图片上传！
