Question

我想在用户点击另一个标签时创建一个漂亮的滑动动画。我正在使用React和React路由器。我使用flexbox使选项卡动态填充容器的空间，因为不同的用户将看到不同数量的选项卡，具体取决于他们被允许查看的内容。当我不知道会有多少个标签时，如何添加动画呢？

我正在寻找与此相似的效果。 https://codepen.io/burntcustard/pen/PwGgJz

这是我的React Tab组件：

return (
  <div className={STYLES.tabbedNavbar}>
    { tabs.map( (tab, i) => {
      return (
        <div className={STYLES.container}>
          <Link
            key={i}
            to={tab.routePath}
            className={STYLES.tab}
            activeClassName={STYLES.activeTab}
            target={tab.newTab ? "_blank" : ""}>
            <div className={STYLES.label} onClick={this.handleClick}> { tab.label } </div>
          </Link>
           <div className={STYLES.slider} ref={ ref => this.slider = ref }></div>
        </div>
      );

这是我对React组件的讽刺：

.tabbedNavbar
  display: flex
  justify-content: space-between
  width: 100%
  border-bottom: 2px solid $medium-gray
  line-height: 16px
  margin: 20px 0 30px 0

.tab
  min-width: 105px
  text-align: center
  color: $header-gray
  &:hover
    color: $header-gray
  &:focus
    text-decoration: none
    color: $header-gray

.activeTab
  color: $base-green
  border-bottom: 4px solid $base-green
  margin-bottom: -2px
  &:hover
    color: $base-green
  &:focus
    color: $base-green
    text-decoration: none

Answer 1

一种方法是，onClick，获取相对于容器的选项卡的left位置。然后，将滑块上的left设置为相同的值。应该使用你有多少标签。确保在滑块上添加transition: position 500ms ease以使移动平稳。

编辑：

Quick and dirty JSFiddle example

Animate react选项卡式导航栏

1 个答案: