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

       需求:需要实现纵向列表左边的一条时间轴,时间轴中间除穿插具体的时间节点外不可间断,单击右边信息盒子里的图标,向下弹出子盒子并撑开列表,时间轴相应的延长。再单击图标,子盒子隐藏,时间轴收缩。看图来直观的了解一下这个需求,为便于观察,使用了醒目的红色线段和紫色边框如图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%,因为子类元素需要从父类元素那里继承高度。若父元素设置的不恰当,可能会引起时间轴不出现或者长度不对。

 

posted @ 2017-02-24 21:45  keang  阅读(545)  评论(0编辑  收藏  举报