动画 svg 线和表格单元格

Question

我正在尝试创建一个水平事件时间轴，我可以在其中显示一些悬停数据。这是我到目前为止所做的：

HTML：

<div class="container">
  <div class="timeline">
    <table class="table table-responsive" style="border-color: transparent;">
      <tbody>
        <tr>
          <td>
            <div class="grow">
              <p style="font-size: 1.25em"><i class="fa fa-book"></i>
                <br>2007</p>
            </div>
          </td>
          <td>
            <div class="grow">
              <p style="font-size: 1.25em"><i class="fa fa-book"></i>
                <br>2009</p>
            </div>
          </td>
          <td>
            <div class="grow">
              <p style="font-size: 1.25em"><i class="fa fa-graduation-cap"></i>
                <br>2013</p>
            </div>
          </td>
          <td>
            <div class="grow">
              <p style="font-size: 1.25em"><i class="fa fa-suitcase"></i>
                <br>Present</p>
            </div>
          </td>
        </tr>
      </tbody>

    </table>
    <svg width="100%">
      <line x1="100%" y1="0" x2="0" y2="0" style="stroke:rgb(255,0,0);stroke-width:5" />
    </svg>
  </div>
</div>

CSS：

timeline {
  padding-top: 50px;
}

.grow {
  -webkit-transform: scale(1);
  -ms-transform: scale(1);
  transform: scale(1);
  transition: all 0.3s ease;
}

.grow:hover {
  -webkit-transform: scale(1.2);
  -ms-transform: scale(1.2);
  transform: scale(1.2);
  transition: all 0.3s ease;
}

JS 小提琴： https://jsfiddle.net/Lmgyzr50/3/

我正在尝试在此演示页面中实现类似于以下时间线的内容：

它位于主页本身的“我们的专家”选项卡上方。

Demo Page

请告诉我如何实现这一目标。

Answer 1

要像 SVG 中那样为线条形状设置动画，您需要对路径的形状进行变形。

这是一个使用 SVG 内置 SMIL 动画元素的示例。

<svg id="line1" width="100%" viewBox="0 -3 120 36">
  <path d="M0,30 c20,0,40,0,60,0 c20,0,40,0,60,0"
        style="fill:none;stroke:rgb(255,0,0);stroke-width:5">
    <animate attributeName="d"
             to="M0,30 c20,0,40,-30,60,-30 c20,0,40,30,60,30"
             dur="0.2s"
             begin="line1.mouseenter"
             fill="freeze"/>
    <animate attributeName="d"
             to="M0,30 c20,0,40,0,60,0 c20,0,40,0,60,0"
             dur="0.2s"
             begin="line1.mouseleave"
             fill="freeze"/>
  </path>
</svg>

这里是你的小提琴，为你的每一列更新了这些 SVG 之一。 https://jsfiddle.net/Lmgyzr50/4/

这是“简单”的方法。还有其他方法可以做到这一点，而不涉及（几乎）相同的 SVG 的多个副本。但是你需要使用 Javascript。

Answer 2

我不得不重新构建 css、html 和 javascript，继续尝试，它的工作方式与示例完全相同。

更新小提琴：https://jsfiddle.net/b7aew84c/8/

$("[link-assoc]").hide();
$("[link]").hover(function () {
	$("[link-assoc="+$(this).attr("link")+"]")
  	.stop(true,true)
  	.slideToggle()
      .siblings()
  		.stop(true,true)
      .slideUp();
});

timeline {
  padding-top: 50px;
}

.container {
  height:100px;
}

#content {
  position:absolute;
  bottom:10px;
  min-height:5px;
  width:100%;
  color:white;
  background:rgb(255,0,0);
}

.container {
  height:150px;
  position:relative;
}

.grow {
  -webkit-transform: scale(1);
  -ms-transform: scale(1);
  transform: scale(1);
  transition: all 0.3s ease;
}

.grow:hover {
  -webkit-transform: scale(1.2);
  -ms-transform: scale(1.2);
  transform: scale(1.2);
  transition: all 0.3s ease;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://opensource.keycdn.com/fontawesome/4.7.0/font-awesome.min.css" integrity="sha384-dNpIIXE8U05kAbPhy3G1cz+yZmTzA6CY8Vg/u2L9xRnHjJiAK76m2BIEaSEV+/aU" crossorigin="anonymous">
<div class="container">
  <div class="timeline">
    <table class="table table-responsive" style="border-color: transparent;">
      <tbody>
        <tr>
          <td>
            <div class="grow" link="1">
              <p style="font-size: 1.25em"><i class="fa fa-book"></i>
                <br>2007</p>
            </div>
          </td>
          <td>
            <div class="grow" link="2">
              <p style="font-size: 1.25em"><i class="fa fa-book"></i>
                <br>2009</p>
            </div>
          </td>
          <td>
            <div class="grow" link="3">
              <p style="font-size: 1.25em"><i class="fa fa-graduation-cap"></i>
                <br>2013</p>
            </div>
          </td>
          <td>
            <div class="grow" link="4">
              <p style="font-size: 1.25em"><i class="fa fa-suitcase"></i>
                <br>Present</p>
            </div>
          </td>
        </tr>
      </tbody>

    </table>
    <div id="content">
      <div link-assoc="1">
        test1
      </div>
      <div link-assoc="2">
        test2
      </div>
      <div link-assoc="3">
        test3
      </div>
      <div link-assoc="4">
        test4
      </div>
    </div>
  </div>
</div>