说米网

这篇文章首要介绍了JS完成cx域名页面侧边栏作用探求,本文经过实例代码给咱们介绍的十分详细，对咱们的学习或工作具有必定的参考借鉴价值，需求的朋友能够参考下

目录

发现：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移动方位展现 。

只能是行内元素，行内块元素都不行。 ——云小梦

它大约结构是这样的：实际就像这样的：哈哈哈

flex简写时包含三个特点：flex-grow、flex-shrink和flex-basis ——

flex-grow：指定了容器剩下空间剩下时分的分配规矩，默认值是0，剩下空间不分配；

flex-shrink：指定了容器剩下空间缺乏时分的分配规矩，默认值是1，空间缺乏要分配；

flex-basis：flex-basis则是指定了固定的分配数量，默认值是auto。

设置的同时需设置width或者height特点；

/* 列表仅水平翻滚 */
.page_list { width: 100vw; display: flex; overflow-y: hidden; }
/* 主内容宽度100%，白色背景覆盖 */
.box { flex: 0 0 100vw; height: 100%; background-color: #fff; position: relative; overflow-y: auto;overflow-x: hidden;transition: all .6s ease; }
/** 遮罩层款式 */
.zb_mask{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 100;
background-color: rgba(0,0,0,.2);
pointer-events: none;
opacity: 0;
transition: all .6s ease;
}
/* 空标签元素，作用是腾出水平翻滚空间 */
.space { flex: 0 0 12rem; }
/* 按钮固定定位，藏在内容白色背景后边 */
.z_two_page { width: 12rem; position: fixed; right: 0; top: 0; }

大约便是：什么也不干的情况下只展现box的内容（也便是和不加这些花里胡哨的div相同的作用），它是用background覆盖后边的class为“space”的占位元素；在”哈哈哈“展现的时分，box右移。

这儿需求留意的是：为什么“哈哈哈”所属div在前而“页面”所属div在后？

由于根据前面所说，这儿选用的是position覆盖，它的规矩便是“后边的覆盖前面的”，所以假如选用这种布局方法，那么一开始被躲藏的元素就要放在前面。

代码中flex的前两个特点值为0，表明在空间增大或缩小时仍然保持原状（这是本文的根底！），第三个元素则写了展现时的“默认大小”：如你所看，box承载的是页面，所以它是100vw，而class为“z_two_page”的元素这儿设置了12rem ，你完全能够将这个值换掉！

那如何将“哈哈哈”展现在视野中？ —— js操控“代表页面的元素”全体移动即可。

这儿有个“遮罩层作用”，按照传统的js完成肯定就要去找display了，再进一步能够用上面所说的“display动画作用”增强体会。

但是本文上面css代码中加了 pointer-events 特点：元素是否穿透；设置为none时就能够不必在意对应元素是否存在了（从事件上看此刻有和没有相同了），也就不必操控display什么的，大大增强性能了有木有！

let right=document.querySelector(“.right”);
let box=document.querySelector(“.box”);
let mask=document.querySelector(“.zb_mask”);
right.onclick=function(){
box.style.marginLeft=”-12rem”;
mask.style.cssText+=”opacity: 1;pointer-events: all;”
}
mask.onclick=function(){
box.style.marginLeft=”0″;
mask.style.cssText+=”opacity: 0;pointer-events: none;”
}

最终，考虑到移动端页面展现的一些问题，比方：右侧留白问题、原生手势对页面全体的影响等，咱们一般会在css中设置 html{max-width: 100vw;overflow-x: hidden;} 。假如你想要用户在移动端仍然只能够经过点击弹出侧边栏，在这儿咱们能够在css中加上约束 —— 设置上方功用只要在PC端生效：

@media (any-hover: none) {
.page_list{
overflow-x: hidden;
}
}

到此这篇关于JS完成页面侧边栏作用探求的文章就介绍到这了.