一.場景
需要實作時間軸清單，左邊一串小圓點，右邊是清單内容，需要小圓點位置與清單項對應，最終效果如下：
timeline
二.實作方案
有幾個細節：
小圓點要與清單項對齊
首項、末項的時間線不能超出小圓點
清單項之間要有間隔
前兩條是對自适應的要求，最後一條是對布局的限制
傳統方案是通過清單容器生成一條足夠長的豎線，然後清單項自帶小圓點，再把小圓點對齊到豎線上。豎線的長度沒有辦法精确控制(不通過js計算的話)，無法滿足第二條，那麼可以換個方式，讓清單項自帶同高度的豎線，拼接成完整的時間線
P.S.不用擔心拼接出來的豎線會被看出來，一定是完美無縫的，否則浏覽器不科學(兩個相鄰的塊級元素之間不能有無法解釋的縫隙吧，那麼它們的border-left一定能夠完美連接配接起來)
三.具體實作
首先确定結構，因為清單項間隔的限制，清單項需要多套一層：
.listItem>.listItemContent>.listItemContent-date+.listItemContent-content
因為用margin實作間隔的話豎線長度不對，接不起來，是以多套一層listItem，把margin換成padding。由listItem攜帶豎線和小圓點：
.listItem {
position: relative;
padding-left: 40px;
padding-top: 4px;
}
.listItem:before {
content: "";
display: inline-block;
position: absolute;
top: 0;
left: 0;
width: 1px;
height: 100%;
border-right: 1px solid #f3f3f3;
left: 19px;
z-index: 1;
}
.listItem:after {
content: "";
display: inline-block;
position: absolute;
width: 8px;
height: 8px;
background-color: #e0e0e0;
border-radius: 4px;
left: 16px;
top: 50%;
margin-top: -2px;
z-index: 1;
}
注意小圓點的margin-top，這個-2px不是目測的，與清單項間隔和小圓點高度有關：
// top 50%, marginTop -50%是小圓點相對于listItem豎直居中
h = listItemContent.height
pt = listItem.paddingTop
ch = 小圓點.height
y = (h + pt)/2 - ch/2
// 我們想要小圓點相對于listItemContent豎直居中
// 要去掉pt帶來的向下偏移offsetY = pt/2 是以
top 50%, marginTop -ch/2 + offsetY
top 50%, marginTop -4 + 2
top 50%, marginTop -2
這是margin轉padding套一層帶來的麻煩
然後加上首項、末項的時間線不能超出小圓點的限制：
.listItem-first:before {
height: 50%;
top: 50%;
}
.listItem-last:before {
height: 50%;
}
最後添上高亮的效果：
.listItem.highlight:after {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
width: 16px;
height: 16px;
background-color: #3d93fd;
border: 4px solid #88bdfe;
border-radius: 8px;
left: 12px;
-webkit-box-shadow: 0 0 0 3px #d8e9ff;
box-shadow: 0 0 0 3px #d8e9ff;
z-index: 2;
}
.listItem.highlight > .listItemContent {
background-color: #3d93fd;
color: #fff;
}
.listItem.highlight .listItemContent-date{
color: #fff;
}
四.Demo
點選清單項高亮，清單項内容支援HTML和圖檔自适應
寫在最後
最近在啃JS動畫原理，感謝月影前輩的分享，功力深厚
之前看過幾遍了，一直沒有了解透徹，直到自己實作才發現數學公式與easing算子的關系