时间轴样式实现技巧

前言

在前端的业务场景中，经常看到有关时间轴的一些样式，通过一条线贯穿头部和尾部，每个节点中有这个节点的相关标记，那么如果我们相关的样式要怎么实现呢？

水平的轴

代码地址：https://codepen.io/robinson90/pen/oNvxBWZ

效果图：

实现思路：
1.顶部的线或者其他轴的效果，通过另外一个div实现
2.与节点相关的样式，包括位置与内容，通过伪元素实现

具体代码：

<div class="crossline">
  <div class="line"></div>
  <ul class="stepUl">
    <li class="step">13
    </li> 
    <li class="step">34
    </li> 
    <li class="step">34
    </li> 
  </ul> 
</div>

*{
  margin:0;
  padding:0;
  border:none;
}
li{list-style:none}
.crossline{
  padding-top:20px;
  .line{
    border-bottom:1px dashed gray;
  }
  .stepUl{
    display:flex;
    margin-top:10px;
    .step:nth-child(2){
      &::after{
        position:absolute;
        background:#fff;
        top:-25px;
        content:'>b';
        display:inline-block;
        left:50%;
        padding:0 5px;
        background:#fff;
      }
    }
      .step:nth-child(3){
        margin-right:0;
        &::after{
        position:absolute;
        background:#fff;
        top:-25px;
        content:'>c';
         width:50%;
          height:20px;
        display:inline-block;
        left:50%;
        background:#fff;
      }
    }
    .step:nth-child(1){
        &::before{
        position:absolute;
        background:#fff;
        top:-25px;
        content:'';
         width:50%;
          height:20px;
        display:inline-block;
        left:0%;
        background:#fff;
      }
      &::after{
        position:absolute;
        background:#fff;
        top:-25px;
        content:'a';
        display:inline-block;
        left:50%;
        padding:0 5px;
        background:#fff;
      }
    }
    .step{
      flex:1;
      position:relative;
      margin-right:5px;
      border:1px solid red;
    }
  }
}

垂直方向的时间轴

实现效果

实现思路：

整体与上面的思路一致，也是用边框做贯穿轴，然后用每个节点的伪元素去抹去不需要的部分，同时用另一个伪元素去实现节点标记本身。（代码见上面地址）

element-ui 的时间线

组件地址：https://element.eleme.cn/#/zh-CN/component/timeline

样式效果：

实现思路：
1 每个节点包含三个部分，分别用于实现竖线，节点样式，主体内容
2 为了保障向下的间距，每个节点包含了向下的20padding作为间距，这里不使用margin是因为需要使用节点的边框来实现时间轴效果
3 竖线使用绝对定位，拿到盒模型的全部高度，使用灰色线
4 节点样式使用绝对定位，圆角
5 主题内容留出向左间距

代码模拟：

.crossline3{
  margin-left:30px;
  .step{
    position:relative;
    height:50px;
    .tail{
      position: absolute;
    left: 4px;
    height: 100%;
    border-left: 2px solid #e4e7ed;
    }
    .dot{
      position: absolute;
    background-color: #e4e7ed;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
      left: -1px;
    width: 12px;
    height: 12px;
    }
    .wrapper{
      position: relative;
    padding-left: 28px;
    top: -3px;
    }
  }
}

步骤条

由此，大家很容易联想到与时间轴类似的另一个前端样式，步骤条，步骤条在轴的样式上与时间轴相同，不同的只是其不关注内容的部分，只关注自己的样式实现。那么我们不妨也看下element-ui是如何实现这部分的样式的，应用了哪些技巧？

组件地址：https://element.eleme.cn/#/zh-CN/component/steps

效果图：

实现思路：

1.顶部与下面为同宽的div，处于同一个父容器中，所以保持同一个宽度，形成左面对其非常容易
2.顶部的图标覆盖效果：首先定位划线灰色，然后用一个带图标的标签覆盖，背景为白色即可

实现代码：
因为实现的代码比较简单，这里就略过，有兴趣的可以去看下element-ui的源码。

备注：那么它最后一条是如何实现没有划线的呢？技巧也很简单，用同类型的选择器，拿到同同类型的最后一个，划线不显示即可。

.el-step:last-of-type .el-step__line{
    display:none
}

小结

通过本文，希望你能了解到如何实现一些类似时间轴、步骤条，以及目前大部分组件如何处理的思路，本文最开始提供的思路是个人思考所得，更为简单，但可能存在样式不够丰富的问题，毕竟伪元素和元素还是有区别的。

其中特别希望大家注意到的一点是，如果你的内容是变化的，而相关的轴是变化的，那么首先这个轴一定是在所有节点的大容器外层绝对定位实现的，或者像element-ui一样，拿到每个元素的绝对宽高去划线然后拼接的，目前针对这点，还没有更优化的思路。