@Svetlana_Ilina

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

Подскажите пожалуйста, второй час голову ломаю, почему не работает 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;
}
  • Вопрос задан
  • 92 просмотра
Пригласить эксперта
Ответы на вопрос 1
rqdkmndh
@rqdkmndh
Web-разработчик
key={uniqid()}

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

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы