テーブルセルと一緒に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を使用する必要があります。