JS实现页面侧边栏效果深掘
|
发现：display动画的应用
实现：如何实现文首展示的效果
其实效果大概是这样的：
而标题，也许是我当时看到这种效果时的真实感受。因为第一反应是：“还可以把page整体移出页面？”
发现：display动画的应用
整件事的起因是什么呢？在笔者最近为社团计划的官网上打算做一个这样的效果：点击头像，左边/右边滑出一个“面板”，里面展示用户的个人信息。
当然，这有很多种做法，比如：利用position定位+overflow溢出隐藏、利用opacity/visibility隐藏+pointer-events元素穿透… 但是笔者当时想到的是如何给”真正的隐藏，display “加上动画！
我们大概都知道的是：HTML渲染过程中有一个可能执行的、影响页面性能的“回流”和“重绘”的过程。导致这个过程被触发的原因有很多：元素位置移动、大小改变、增删节点以及这里要说的display显示与隐藏切换等等。而元素的变动需要页面快速的显示出来，所以在我们看来是“突兀”的。
而且有一点需要注意的是：浏览器是“有点智能”的 —— 它可以判断如果会触发页面回流的代码有很多，那么它会将这些代码都读取完再（合并）一起执行 ，所以这也是下面这段代码会有如下图效果的原因：
/** css代码 */ width: 50px; height: 50px; background-color: red; display: none; transform: translateX(0); transition: all .6s ease; //似乎没用？
//js代码 ds.style.display="block"; ds.style.transform="translateX(100px)";
但是同样的，当对以下属性进行操作的时候，由于浏览器的渲染机制有一些API可以使页面强制渲染（因为要获得详细确切的信息），包括：offsetTop、offsetLeft、 offsetWidth、offsetHeight、scrollTop、scrollLeft、scrollWidth、scrollHeight、clientTop、clientLeft、clientWidth、clientHeight、getComputedStyle() (currentStyle in IE)。这会直接导致前后两行相当于“渲染了两遍”。
所以将上方js代码改为下面这样：
//js代码 ds.style.display="block"; ds.offsetHeight; ds.style.transform="translateX(100px)";
就可以了
目前csdn官网PC端blink发布页面的图片上传就用了类似这个功能！
后来还是觉得这种方式需要涉及js对页面结构的改变，于是乎…
实现：如何实现文首展示的效果
这基于position定位是会“重合”的：在两个行内元素都设置了定位属性（但没有加top/left/bottom/right定位）后，后面的会覆盖前面的；这时候可以通过margin移动位置展示 。
只能是行内元素，行内块元素都不行。 ——云小梦
它大概结构是这样的：
<div class="page_list"> <div class="z_two_page"> <!-- 这里放右侧弹框展示的信息 --> </div> <div class="box"> <!-- "页面"的遮罩层 --> <div class="zb_mask"></div> <!-- 这里放“页面”数据结构（也就是原本应该在body标签下的所有东西） --> </div> <!-- 这是占位元素 --> <div class="space"></div> </div>
实际就像这样的：
<div class="page_list"> <div class="z_two_page">哈哈哈</div> <div class="box"> <div class="zb_mask"></div>
<div id="boxs"> <div class="left" style="background-color:#ffc5c5;"></div> <div class="right" style="background-color:#7171f7;"> flex下两列布局左边固定右边宽高自适应 </div> </div> <div class="color"></div> <a href="#" rel="external nofollow" class="a">千万小心像对a设置全局样式（这叫啥样式重置）</a> <div class="center"> <div class="ds"></div> <button class="but">到指定地点</button> </div> <form id="form" action="#"> <input type="submit" value="="踢脚板 /> </form> <img id="img" src=http://www.0668zz.cn/html/xinwen/dongtai/2021/1013/"compress/compress/img/mxc_16x16.png" /> </div>
<div class="space"></div> </div>
如上，class为“box”的div里面放的就是“原本的页面整体”部分。为了达到想要的效果，我们采用了flex布局！
flex简写时包括三个属性：flex-grow、flex-shrink和flex-basis ——
flex-grow：指定了容器剩余空间多余时候的分配规则，默认值是0，多余空间不分配；
flex-shrink：指定了容器剩余空间不足时候的分配规则，默认值是1，空间不足要分配；
flex-basis：flex-basis则是指定了固定的分配数量，默认值是auto。 （编辑：焦作站长网） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |
