Почему CSSTransition не вешает стили?

Question

[Svetlana_Ilina]

Подскажите пожалуйста, второй час голову ломаю, почему не работает CSSTransition? стили не вешает, анимации не отрабатывают

import styles from './DropDawn.module.css'
            <TransitionGroup>
            {list.map((item) => (
              <CSSTransition
                key={uniqid()}
                nodeRef={createRef(null)}
                timeout={1500}
                classNames={{
                  enter: styles.dropDawnItemEnter,
                  enterActive: styles.dropDawnItemEnterActive,
                  exit: styles.dropDawnItemExit,
                  exitActive: styles.dropDawnItemExitActive,
                }}
              >
                <li className={styles.dropDawnItem} onClick={item.onClick}>
                  {item.icon}
                  <span className={styles.dropDawnItemText}>{item.title}</span>
                </li>
              </CSSTransition>
            ))}
          </TransitionGroup>

.dropDawnItemEnter {
  opacity: 0;
}
.dropDawnItemEnterActive {
  opacity: 1;
  transition: opacity 1500ms ease-in;
}
.dropDawnItemExit {
  opacity: 1;
}
.dropDawnItemExitActive {
  opacity: 0;
  transition: opacity 1500ms ease-in;
}

Comments

[dicem]

Попробуй предварительно сделать массив данных list в котором есть key: uniqid() , и только потом кидать его в list.map

Проще говоря, ключи должны быть сгенерированы изначально (во Vue была бы именно такая ошибка)

[dicem]

А ну и еще Dropdown пишется через O, а то у тебя какое то "выпадение рассвета" получается, а не "выпадающий список"

[Svetlana_Ilina]

dicem, спасибо за совет, но не помогло

[dicem]

Svetlana_Ilina, А ты пришли пожалуйста полный код компонента

[Svetlana_Ilina]

dicem,

const profileList = [
    { title: 'Settings', icon: <Gear />, ref: createRef(null),  },
    {
      title: 'Log out',
      onClick: handleLogOut,
      icon: <LogOut />,
      ref: createRef(null),
    },
  ]

const DropDown = (props) => {
  const { icon, list } = props
  const dropdownRef = useRef(null)
  const [isDropDawnActive, setIsDropDawnActive] = useState(false)

  useClickOutSide(dropdownRef, () => {
    if (isDropDawnActive) setIsDropDawnActive(false)
  })

  const handleDropDawn = () => {
    setIsDropDawnActive(!isDropDawnActive)
  }

  return (
    <div className={styles.dropDawn} ref={dropdownRef}>
      <div className={styles.dropDawnButton}>
        <CustomButton
          type={'button'}
          icon={icon}
          isScalabale={false}
          onClick={handleDropDawn}
        />
      </div>
      {isDropDawnActive && (
        <ul className={styles.dropDawnMenu}>
          <TransitionGroup>
            {list.map((item) => (
              <CSSTransition
                key={item.title}
                nodeRef={item.ref}
                timeout={1500}
                classNames={{
                  enter: styles.dropDawnItemEnter,
                  enterActive: styles.dropDawnItemEnterActive,
                  exit: styles.dropDawnItemExit,
                  exitActive: styles.dropDawnItemExitActive,
                }}
              >
                <li className={styles.dropDawnItem} onClick={item.onClick}>
                  {item.icon}
                  <span className={styles.dropDawnItemText}>{item.title}</span>
                </li>
              </CSSTransition>
            ))}
          </TransitionGroup>
        </ul>
      )}
    </div>
  )
}

export default DropDown

Answer 1

[Антон Горецкий]

key={uniqid()}

так нельзя делать. Ключи при каждом рендере должны быть одни и те же. В этом их смысл.