用CSS和一点JavaScript写一个垂直时间线

Chinese (Simplified) (中文（简体）) translation by Songfeng Li（李松峰) (you can also view the original English article)

在本教程中，我们将从零开始学习如何构建响应式垂直时间线。首先，创建基本的标记结构，然后应用CSS伪元素魔法。接着，使用JavaScript添加向下滚动页面时的过渡效果。

先来看看最终完成后的时间线效果（通过CodePen来看更大的版本）

1. HTML标记

标记很简单，就是一个无序列表，然后每个列表项包含一个div元素。因为时间线上要显示事件，所以为每个列表项添加time元素以显示时间。

此外，把整个列表都放到一个section元素里，给它一个类叫timeline：

<section class="timeline">
  <ul>
    <li>
      <div>
        <time>1934</time>
        Some content here
      </div>
    </li>
    
    <!-- more list items here -->
  </ul>
</section>

此时的页面布局如下所示：

2. 添加CSS样式

先添加一些颜色（下面CSS代码的上半部分），再为列表项应用结构化的CSS规则。同时，也为这些项目的::after伪元素添加样式：

.timeline ul li {
  list-style-type: none;
  position: relative;
  width: 6px;
  margin: 0 auto;
  padding-top: 50px;
  background: #fff;
}

.timeline ul li::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: inherit;
}

为了清楚起见，这里删除了列表项里的内容，结果如下：

3. 时间线元素样式

现在为列表项中的div元素（我们叫它“时间线元素”）添加样式。同样，也给这些元素的::before伪元素添加样式。

一会儿我们会看到，并不是所有“时间线元素”的样式都完全一样。这就需要用到:nth-child(odd)和:nth-child(even)这两个伪类了，通过它们可以实现样式差异化。

以下是相应的CSS规则：

.timeline ul li div {
  position: relative;
  bottom: 0;
  width: 400px;
  padding: 15px;
  background: #F45B69;
}

.timeline ul li div::before {
  content: '';
  position: absolute;
  bottom: 7px;
  width: 0;
  height: 0;
  border-style: solid;
}

然后是奇数个元素的样式：

.timeline ul li:nth-child(odd) div {
  left: 45px;
}

.timeline ul li:nth-child(odd) div::before {
  left: -15px;
  border-width: 8px 16px 8px 0;
  border-color: transparent #F45B69 transparent transparent;
}

最后是偶数个元素的样式：

.timeline ul li:nth-child(even) div {
  left: -439px;
}

.timeline ul li:nth-child(even) div::before {
  right: -15px;
  border-width: 8px 0 8px 16px;
  border-color: transparent transparent transparent #F45B69;
}

有了这些样式（以及补充好内容的HTML），时间线的效果就有了雏形：

奇数（odd）和偶数（even）“时间线元素”在样式上的差别主要是定位。前者为left:45px;，后者为left:-439px;。不理解这些值是怎么来的？好，下面是计算过程：

每个“时间线元素”的宽度+留白-每个列表项的宽度=400px+45px-6px=439px

其次，是各自伪元素上生成的箭头。 “奇数”伪元素生成左箭头，“偶数”伪元素生成右箭头。

4. 交互

时间线的基本结构完成了，下面看看新的需求：

默认情况下，时间线元素应该隐藏；
它们应该在父元素进入视口时出现。

第一个需求简单。第二个还挺复杂的。因为需要检测目标元素是否完全进入了当前视口，如果是则显示其子元素。要实现这个功能，不需要使用任何JavaScript库（比如WOW.js或ScrollReveal.js）。甚至都不需要我们自己写太复杂的代码。哈哈，StackOvewrflow上对这个功能有一个非常热门的讨论。我们先用上面建议的方式测试某个元素是否完全进入了当前视口。

这是我们使用的一个简单的函数：

function isElementInViewport(el) {
  var rect = el.getBoundingClientRect();
  return (
    rect.top >= 0 &&
    rect.left >= 0 &&
    rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&
    rect.right <= (window.innerWidth || document.documentElement.clientWidth)
  );
}

进入视口时添加类

接下来为当前视口中可见的列表项添加in-view类。

注意：测试它们在以下情况下是否可见很重要。

页面加载时
向下滚动时

有必要的话，还可以再测试更多的情况（比如浏览器窗口缩放时）。

我们这里使用的代码如下：

var items = document.querySelectorAll(".timeline li");

// code for the isElementInViewport function

function callbackFunc() {
  for (var i = 0; i < items.length; i++) {
    if (isElementInViewport(items[i])) {
      items[i].classList.add("in-view");
    }
  }
}

window.addEventListener("load", callbackFunc);
window.addEventListener("scroll", callbackFunc);

添加完JavaScript，再刷新页面，应该看到如下结果：

隐藏或显示

先回顾一下我们的需求。记住，默认情况下，所有DIV都应该隐藏。为此我们visibility和opacity这两个CSS属性。另外，我们使用translated3d()把它们从原始位置移开200px。只要它们的父元素可见，就显示它们并删除预先设置的位移。这样，就可以实现漂亮的滑入特效。

最后还要做一件事，就是当li元素在视口中时，要修改其::before伪元素的背景颜色。

以下就是实现以上需要的所有样式：

.timeline ul li::after {
  background: #fff;
  transition: background .5s ease-in-out;
}

.timeline ul li.in-view::after {
  background: #F45B69;
}

.timeline ul li div {
  visibility: hidden;
  opacity: 0;
  transition: all .5s ease-in-out;
}

.timeline ul li:nth-child(odd) div {
  transform: translate3d(200px,0,0);
}

.timeline ul li:nth-child(even) div {
  transform: translate3d(-200px,0,0);
}

.timeline ul li.in-view div {
  transform: none;
  visibility: visible;
  opacity: 1;
}

下面的示意图展示了时间线的初始状态。能看到时间线元素，是为了显示它们的初始位置而为它们应用了一点不透明度。

The default appearance of the timeline before the animations

而以下是时间线的最终状态：

The final appearance of the timeline after the animations

5. 响应式

终于快完成了。最后一件事就是实现响应式的时间线。

首先，在所谓的“中等屏幕”（>600px且≤900px）上，我们只做少许改动。特别是要修改DIV的宽度。

以下是要修改的规则：

@media screen and (max-width: 900px) {
  .timeline ul li div {
    width: 250px;
  }
  .timeline ul li:nth-child(even) div {
    left: -289px; /*250+45-6*/
  }
}

此时的时间线效果如下：

而在小屏幕（≤600px）上，所有时间线元素看起来都一样，无论是奇数个还是偶数个。同样，需要覆盖一些CSS规则：

@media screen and (max-width: 600px) {
  .timeline ul li {
    margin-left: 20px;
  }
  
  .timeline ul li div {
    width: calc(100vw - 91px);
  }
  
  .timeline ul li:nth-child(even) div {
    left: 45px;
  }
  
  .timeline ul li:nth-child(even) div::before {
    left: -15px;
    border-width: 8px 16px 8px 0;
    border-color: transparent #F45B69 transparent transparent;
  }
}

在更小一些的屏幕上，时间线应该是这样的：