JS实现-cx域名-页面侧边栏效果探究

这篇文章首要介绍了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下两列布局左边固定右边宽高自适应

千万小心像对a设置全局款式(这叫啥款式重置)

   到指定地址
如上,class为“box”的div里边放的便是“本来的页面全体”部分。为了到达想要的作用,咱们选用了flex布局!

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完成页面侧边栏作用探求的文章就介绍到这了.

共有 0 条评论

发表评论

电子邮件地址不会被公开。 必填项已用*标注