选项卡式菜单动画

Question

我正在尝试遵循材料设计主题，尽管我没有使用聚合物。

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

我不想重新创建涟漪效果，只想重新创建选项卡底部的动画条，当一个选项卡被聚焦时会移动。

你可以在这里看到一个例子（动画在页面的最底部） 标签触摸目标动画

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

任何帮助表示赞赏。

Answer 1

注意： 我不喜欢你在这个问题上付出了很少的努力，你自己没有展示任何尝试，但我看了一眼并且非常喜欢标签式菜单，我想为我的 Codepen 帐户创建它。

所以我不妨回答这个问题，我已经评论了我的代码，所以你可以通过它来查看一切都在做什么。它只是position: absolute滑块的问题，然后使用选项卡的宽度将其移动到选定的选项卡位置以设置其位置。

$("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>

请参阅此处了解菜单上的涟漪效应，代码片段出于某种原因不喜欢它们。