动画反应选项卡式导航栏

Question

I want to create a nice sliding animation when a user clicks to another tab. I am using React and React router. Im using flexbox to make the tabs dynamically fill up the space of the container, since different users will see a different number of tabs depending on what they are permissioned to see. How can I add animations when I don't know the number of tabs there will be?

Im looking for an effect similar to this. https://codepen.io/burntcustard/pen/PwGgJz

Here is my React Tab component:

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>
      );

Here is my sass for the React component:

.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

One way would be to, onClick, get the left position of the tab relative to the container. Then, set left on your slider to the same value. Should work with however many tabs you have. Make sure to add a transition: position 500ms ease to your slider to make the movement smooth.

EDIT:

Quick and dirty JSFiddle example