Изменение в CSS оставило свойство без анимации

Question

В списке шагов в рецепте все шаги divs отображаются в position: absolute в контейнере с overflow: hidden.

Шаг скрывается с правой стороны экрана, если это предстоящий шаг, перемещается в центр (видимый) для текущего шага, а затем перемещается влево. (это отслеживается как currentness).

export const CookingStep = ({ step, currentness }: Props) => {

  const StepWrapper = styled.div({
    width: '100%',
    background: 'lightgrey',
    height: '100px',
    position: 'absolute',
    display: 'flex',
    justifyContent: 'center',
    alignItems: 'center',
    transition: '1s ease',
    left: currentness! * 100 + '%' // left = -1, center = 0, right = 1
  })

  return <StepWrapper children={ step.text }/>
}

/* REDUX CONTAINER */

const selectProps = (state: RootState, ownProps: Props) =>
  ({ currentness: getCurrentness(ownProps.step)(state) })

const CookingStepContainer = connect(selectProps)(CookingStep)

export default CookingStepContainer

Все работает правильно , за исключением того, что оно не анимирует (из свойства transition).

Я чертовски уверен, что я не переопределяю родительский элемент CookingStep, когда я изменяю шаги (что может привести к тому, что шаги будут удалены, не перерисованы или что-то в этом роде, и предотвратит анимацию). Я попробовал оператор log внутри StepsCarousel, чтобы увидеть, когда он рендерится, и он рендерится только один раз (при запуске).

// Wrappers are just styled components

const StepsCarousel = ({ steps, incStep, decStep }: Props) =>
  <CarouselWrapper>
    <Arrow onClick={ incStep }>{ "<" }</Arrow>
    <StepsWrapper>{
      steps.map((step, i) =>
        <CookingStepContainer step={ step } key={ i }/>
      )
    }</StepsWrapper>
    <Arrow onClick={ decStep }>{ ">" }</Arrow>
  </CarouselWrapper>

Я смоделировал весь макет html / css и анимационное поведение на https://codesandbox.io/s/angry-grass-hjkw9, которое заняло у меня глупое количество кропотливых умопомрачительных часов, но отлично оживило. Я не вижу разницы между тем, что я там делал, и тем, что я делал здесь.

(В кодах и ящиках я использовал имена классов вместо прямой установки свойства left со стилизованным компонентом. Но я на самом деле попытался использовать имена классов в приложении, но безрезультатно).

Почему не работает анимация?

Answer 1

Переместите компонент StyledWrapper из компонента CookingStep и передайте currentness в качестве реквизита StyledWrapper:

const StepWrapper = styled.div({
    width: '100%',
    background: 'lightgrey',
    height: '100px',
    position: 'absolute',
    display: 'flex',
    justifyContent: 'center',
    alignItems: 'center',
    transition: '1s ease',
    left: ${props => props.currentness! * 100 + '%'}
  })

export const CookingStep = ({ step, currentness }: Props) => {
  return <StepWrapper currentness={currentness} children={ step.text }/>
}

Надеюсь, это поможет:)