带有 Turbolinks 的 Rails 5 中的材质选项卡答案

【问题标题】：Material tabs in Rails 5 with Turbolinks带有 Turbolinks 的 Rails 5 中的材质选项卡
【发布时间】：2017-02-25 13:44:50
【问题描述】：

我想做这样的事情：http://www.jqueryscript.net/demo/Material-Design-Sliding-Tab-Menu-With-jQuery-CSS3/ 作为我的 Rails 应用程序中的菜单。滑块的（下划线）滑动动画应该播放并且页面应该同时加载。

我设法通过将菜单设置为 data-turbolinks-permanent 使滑块在我单击的链接下移动，但我为滑块设置的过渡不播放 - 它只是跳跃。我也尝试使用jquery.animate 代替过渡，但是动画非常延迟，缓慢且不稳定。有什么办法可以通过 Turbolinks 实现这一目标？

  $('.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 (Sass)

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

【问题讨论】：

标签： javascript css ruby-on-rails material-design turbolinks

【解决方案1】：

你为什么不使用这个伟大的框架？ materializecss.com/tabs.html

无论如何，如果您真的想自己制作，请并排放置 n 个宽度为 100vw 的选项卡，并在标题中创建 n 个元素。滑动效果使用jquery，onClick效果使用纯idhrefing。

【讨论】：