动画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/

我想实现像本演示p中下面的时间线一样年龄：

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

Demo Page

请告诉我怎样才能做到这一点。

Answer 1

我不得不重构css，html和javascript，继续前进，并且一展身手，它的工作原理与示例类似。

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

$("[link-assoc]").hide(); 
 
$("[link]").hover(function() { 
 
\t $("[link-assoc="+$(this).attr("link")+"]") 
 
    \t .stop(true,true) 
 
    \t .slideToggle() 
 
     .siblings() 
 
    \t \t .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>

Answer 2

要在动画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>

这里是你摆弄这些SVGs为每个列的一个更新。 https://jsfiddle.net/Lmgyzr50/4/

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