伪类元素实现可伸缩时间轴

       需求：需要实现纵向列表左边的一条时间轴，时间轴中间除穿插具体的时间节点外不可间断，单击右边信息盒子里的图标，向下弹出子盒子并撑开列表，时间轴相应的延长。再单击图标，子盒子隐藏，时间轴收缩。看图来直观的了解一下这个需求，为便于观察，使用了醒目的红色线段和紫色边框如图a、图b所示：

图a   初始状态下的时间轴                                                       图b  弹出子元素后的时间轴

      实现：方案一，每一个列表为一个item，在单个item左边的时间盒子里使用绝对定位，使用div加border实现两条纵向直线，但是这种方案使用到的标签较多，意味着创建的dom节点很多并且所需要的css代码很繁琐，不利于提升页面性能和开发效率，后经同事指点，采用伪类元素加绝对定位成功的实现了这个需求。

方案二：伪类元素+绝对定位。以单个item为例，用基本的伪类元素实现线段后并使用绝对定位定位到UI要求的位置如图所示，

由于当子盒子弹出时伸长的是底部纵轴线段，故需要着重考虑的是底部纵轴线段长度的控制。使用绝对定位，底部元素长度控制的代码为：

    content: '';
    border-left: 1px solid red;
    position: absolute;
    left: .39rem;
    width: 1px;
    bottom:0;
    top:.9rem;
    height:auto;

top属性设置此直线距离顶部的位置，即要留出一段空白显示具体的时间18:48，bottom属性设置元素长度底部的位置，要想上下间的item无缝对接显示成一条不间断的直线，故设置bottom：0非常重要。最关键的还是要设置父元素position:relative了，即设置此直线位置是相对于哪个父元素而言，w3school介绍的是，生成绝对定位的元素，相对于static定位以外的第一个父元素进行定位，若父元素没有相对定位position:relative，则该子级元素会相对于body来定位。故此处设置单个item元素的定位position：relative即可，除此之外，还需要设置包裹伪类元素的父元素高度为:100%，因为子类元素需要从父类元素那里继承高度。若父元素设置的不恰当，可能会引起时间轴不出现或者长度不对。

标签：

版权申明：本站文章部分自网络，如有侵权，请联系：west999com@outlook.com
特别注意：本站所有转载文章言论不代表本站观点，本站所提供的摄影照片，插画，设计作品，如需使用，请与原作者联系，版权归原作者所有