javascript - 标签式菜单动画

Question

虽然我没有使用聚合物，但我正在尝试遵循 Material 设计主题。

我想创建一个选项卡式菜单，并按照设计指南中的指定方式对其进行动画处理。

我不想重新创建涟漪效果，只是在选项卡底部移动的动画条在选项卡上获得焦点时移动。

你可以在这里看到一个例子(动画在页面的最底部) Tab touch target animation

我不确定这是否可以仅使用 CSS 完成，但如果不能，jquery/js 不是问题。

感谢任何帮助。

Answer 1

注意: 我不喜欢你在这个问题上付出了很少的努力，你自己没有表现出任何尝试，但我看了一下并喜欢选项卡式菜单我非常想为我的 Codepen 帐户创建它。

所以我不妨回答一下这个问题，我已经对我的代码进行了注释，这样您就可以研究它并查看一切都在做什么。这只是 position: absolute slider 的问题，然后使用选项卡的宽度将其移动到选定的选项卡位置以设置其位置。

$("ul li").click(function(e) {

  /* Add the slider movement */

  // what tab was pressed
  var whatTab = $(this).index();

  // Work out how far the slider needs to go
  var howFar = 160 * whatTab;

  $(".slider").css({
    left: howFar + "px"
  });
});

@import url(http://fonts.googleapis.com/css?family=Lato:100,300,400,700);
 * {
  box-sizing: border-box;
}
body {
  font-family: 'Lato', sans-serif;
  background: #222;
}
ul {
  font-size: 0;
  position: relative;
  padding: 0;
  width: 480px;
  margin: 40px auto;
}
li {
  display: inline-block;
  width: 160px;
  height: 60px;
  background: #39CCCC;
  font-size: 16px;
  text-align: center;
  line-height: 60px;
  color: #fff;
  text-transform: uppercase;
  position: relative;
  overflow: hidden;
}
.slider {
  display: block;
  position: absolute;
  bottom: 0;
  left: 0;
  height: 4px;
  background: yellow;
  transition: all 0.5s;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <li>Item One</li>
  <li>Item Two</li>
  <li>Item Three</li>
  <li class="slider"></li>
</ul>

参见 here对于菜单上的涟漪效应，代码片段出于某种原因也不喜欢它们。