Turbolinksを使用したRails 5の素材タブ

Question

私はRailsアプリケーションのメニューとしてhttp://www.jqueryscript.net/demo/Material-Design-Sliding-Tab-Menu-With-jQuery-CSS3/をこのようにしたいと考えています。スライダ（下線）スライディングアニメーションが再生され、同時にページが読み込まれます。

私は、データturbolinks-permanentにメニューを設定してクリックしたリンクの下でスライダーを移動させることができましたが、スライダーに設定したトランジションは再生されません。私はまた、トランジションの代わりにjquery.animateを使用しようとしましたが、アニメーションは非常に遅く、遅く、不安定です。ターボリンクでこれを達成する方法はありますか？

$('.menu-item').on 'click',() -> 
    return if $(this).hasClass('slider') 
    slider = $('.slider') 
    slider.css('width', $(this).width()) 
    slider.css('left', $(this).offset().left - ($(window).width()-$('#wrapper').width())/2) 

そしてHTML：

<ul id="menu" data-turbolinks-permanent> 
    <li class="menu-item underline"><%= link_to 'Item1', root_url %></li> 
    <li class="menu-item underline"><a href="#">Item2</a></li> 
    <li class="menu-item underline"><a href="#">Item3</a></li> 
    <li class="menu-item underline"><a href="#">Item4</a></li> 
    <li class="menu-item underline"><a href="#">Item5</a></li> 
    <li class="slider"></li> 
</ul> 

とCSS（サス）

.slider 
    display: block 
    position: absolute 
    bottom: 0 
    left: 0 
    height: 4px 
    width: 90px 
    background: black 
    transition: all .3s linear 

Answer 1

は、なぜあなたは、この偉大なフレームワークを使用していませんか？ materializecss.com/tabs.html

とにかく自分で作成したいのであれば、幅100vwのn個のタブを並べて、ヘッダにn個の要素を作成してください。スライディングエフェクトにはjqueryを使用し、onClickエフェクトには純粋なID hrefingを使用します。