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

Ссылка скопирована
React Анимация Веб-разработка
1 ответ

Один из компонентов (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>   } }

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

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} ..., хз:)

Нужно решить такую задачу?

Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.

Заказать помощь
Лучший ответ
1
Артём Dev Ответ

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

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

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

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

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

const MyComponent = ({ prop }) =&gt; {
  const [isVisible, setIsVisible] = useState(false);
 
  useEffect(() =&gt; {
    setIsVisible(true);
  }, [prop]);
 
  return (
 
      {/* Ваш контент здесь */}
 
  );
};

const MyComponent = ({ prop }) =&gt; { const [isVisible, setIsVisible] = useState(false); useEffect(() =&gt; { setIsVisible(true); }, [prop]); return ( {/* Ваш контент здесь */} ); };

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

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

div {
  transition: opacity 0.3s;
}

div { transition: opacity 0.3s; }

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

Другие ответы (0)

Пока нет других ответов. Будьте первым, кто поможет автору.

Ответить на вопрос

комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *

Вам также может быть интересно

VPN Как правильно настроить vless для Android TV? 1 ответ Pyrogram Как правильно зарегистрировать юзер бота в Telegram? 1 ответ печатные-платы Как заставить запускаться программу M3.exe от компании Hanxing AOI в инспекционной машине на Windows 7 Pro? 1 ответ Safari Почему снова флагнули домен в safari? 1 ответ