Как заставить Framer Motion анимацию работать после смены пропов компонента?

Question

[Александр]

Один из компонентов (PartSlot) в моем проекте необходимо анимировать только тогда, когда проп isActive = true. Это влияет не только на анимацию, но также на стиль и поведение компонента, и если css и поведение при клике действительно меняются при обновлении пропов, то анимации запускаться отказываются.

С другой стороны, анимации работают отлично, если PartSlot с самого начала рендерится с isActive = true, однако компоненты, которые были созданы с isActive = false, нормально не работают.

В чем может быть проблема?

Код компонента:

function PartSlot({ isActive, iconAddress, computer, partClassName, partName, setOnClick }: PartSlotProps) {
  return {
    <motion.div 
      onClick={ isActive ? () => { setOnClick(partClassName) } : undefined }
      initial = 'tap'
      whileHover='hover'
      whileTap= {isMobile ? 'tapMobile' : 'tap'}
      style={ inactivePartSlotStyle }
    >

      <div className='IconMountLower'>
        <div className='IconMountUpper' style = { inactiveIconHolderStyle  }>
          <motion.img 
            src={iconAddress} 
            variants={ isActive ? partSlotAnimationVariants : undefined }
            transition={{
              duration: 0.08,
              ease: easeOut
            }}
          />
        </div>
      </div>
      {/* some more stuff here */}
    </motion.div>
  }
}

Отсюда я беру компоненты:

export const predefinedPartSlotList = (isActive: boolean, computer: Computer, onClickPartSlot: (partClassName: PartClassName) => void): Array<ReactElement> => {
    return [
        (<PartSlot key={1} isActive={isActive} iconAddress={MotherboardIcon} partClassName={PartClassName.Motherboard} computer={computer} setOnClick={onClickPartSlot} partName={"Материнская плата"}/>),
        (<PartSlot key={2} isActive={isActive} iconAddress={FanIcon} partClassName={PartClassName.Case} computer={computer} setOnClick={onClickPartSlot} partName={"Корпус"}/>)
        // More PartSlots here
        ]
};

Comments

[Aetae]

Попробуй так <motion.img key={isActive} ..., хз:)