Почему не работает transition?

Question

[stepan132]

Здравствуйте. Решил анимировать переход по табам и столкнулся с проблемой: переход не плавный.
Использую: React + styled-components
При клике на название таба, я заношу в state ширину и отступ от левого края. По эти данным рисуется подчеркивание активного таба. Все работает корректно за исключением плавного перехода, элемент просто перескакивает. Вот части кода:

state = {
    tabUnderlineWidth: 131,
    tabUnderlineLeft: 0,
}

// функция, выполняющаяся при клике на название таба
changeActiveTab = (e: React.MouseEvent<HTMLElement>, tabName: string) => {
    const node = e.target as HTMLElement
    const nodeLeftIndent = node.offsetLeft
    const nodeWidth = node.offsetWidth

    this.setState({
      tabUnderlineWidth: nodeWidth,
      tabUnderlineLeft: nodeLeftIndent
    })
}

<TabIconsWrapper> // обертка названий табов
            {tabNames.map(({ tabName, title }, i) => { // Сами названия табов
              return <TabIcon
                onClick={(e) => this.changeActiveTab(e, tabName)}
                key={i}
              >{title}</TabIcon>
            })}
            <TabIconUnderline tabUnderlineWidth={tabUnderlineWidth} tabUnderlineLeft={tabUnderlineLeft} // элемент, который должен анимироваться
</TabIconsWrapper>

вот styled-components:

const TabIconsWrapper = styled.div`
  position: relative;
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 50px;
`
const TabIconUnderline = styled.span`
  position: absolute;
  bottom: 0;
  height: 2px;
  background: #000;
  transition: 2s;
  
  ${(props: { tabUnderlineWidth: number, tabUnderlineLeft: number }) => `
    width: ${props.tabUnderlineWidth}px;
    left: ${props.tabUnderlineLeft}px;
  `};
`

Смотрел в инспекторе, ширина и отступ выставляются корректно. также пробовал выставлять inline стили, эффекта это не дало

Answer 1

[Александр]

Читали?