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

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

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

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

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

function PartSlot({ isActive, iconAddress, computer, partClassName, partName, setOnClick }: PartSlotProps) {   return {     &lt;motion.div        onClick={ isActive ? () =&gt; { setOnClick(partClassName) } : undefined }       initial = 'tap'       whileHover='hover'       whileTap= {isMobile ? 'tapMobile' : 'tap'}       style={ inactivePartSlotStyle }     &gt;        &lt;div className='IconMountLower'&gt;         &lt;div className='IconMountUpper' style = { inactiveIconHolderStyle  }&gt;           &lt;motion.img              src={iconAddress}              variants={ isActive ? partSlotAnimationVariants : undefined }             transition={{               duration: 0.08,               ease: easeOut             }}           /&gt;         &lt;/div&gt;       &lt;/div&gt;       {/* some more stuff here */}     &lt;/motion.div&gt;   } }

1

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) =&gt; void): Array&lt;ReactElement&gt; =&gt; {     return [         (&lt;PartSlot key={1} isActive={isActive} iconAddress={MotherboardIcon} partClassName={PartClassName.Motherboard} computer={computer} setOnClick={onClickPartSlot} partName={"Материнская плата"}/&gt;),         (&lt;PartSlot key={2} isActive={isActive} iconAddress={FanIcon} partClassName={PartClassName.Case} computer={computer} setOnClick={onClickPartSlot} partName={"Корпус"}/&gt;)         // More PartSlots here         ] };

1

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 ] };

Дополнительно:

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

+ Заказать

Для решения данной проблемы вы можете воспользоваться услугами фрилансеров. Мы выполним необходимую работу быстро и качественно.

Есть ответ
07.04.2024

Ответить

Для того чтобы заставить Framer Motion анимацию работать после смены пропов компонента, можно воспользоваться хуком useEffect из библиотеки React.

Прежде всего, убедитесь, что у вас установлен Framer Motion. Затем импортируйте необходимые компоненты:

import { motion } from "framer-motion";
import { useEffect, useState } from "react";

1 2	import { motion } from "framer-motion"; import { useEffect, useState } from "react";

Далее, создайте компонент, в котором будет происходить изменение пропов:

const MyComponent = ({ prop }) => {
  const [isVisible, setIsVisible] = useState(false);

  useEffect(() => {
    setIsVisible(true);
  }, [prop]);

  return (
    
      {/* Ваш контент здесь */}
    
  );
};

1

2

3

4

5

6

7

8

9

10

11

12

13

const MyComponent = ({ prop }) => {

const [isVisible, setIsVisible] = useState(false);

useEffect(() => {

setIsVisible(true);

}, [prop]);

return (

{/* Ваш контент здесь */}

);

};

В данном примере, компонент MyComponent принимает проп prop, который меняется с течением времени. С помощью хука useEffect мы следим за изменениями этого пропа и устанавливаем isVisible в true, что позволяет анимации работать.

Не забудьте также добавить стили для анимации в вашем CSS:

div {
  transition: opacity 0.3s;
}

1

2

3

div {

transition: opacity 0.3s;

}

Теперь, когда проп компонента изменится, анимация в Framer Motion будет работать корректно после смены пропов.

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

Дополнительно:

Оставить комментарий Отменить

Ответы

Ежедневно, круглосуточно

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

Дополнительно:

Оставить комментарий Отменить

Ответы

Метки

Ежедневно, круглосуточно