Почему стили не применяются при использовании CSSTransition?

Question

Рустем

javascript , react

Почему стили не применяются при использовании 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>

CSS: 

.dropDawnItemEnter {
  opacity: 0;
}

.dropDawnItemEnterActive {
  opacity: 1;
  transition: opacity 1500ms ease-in;
}

.dropDawnItemExit {
  opacity: 1;
}

.dropDawnItemExitActive {
  opacity: 0;
  transition: opacity 1500ms ease-in;
}

26 октября 2023 г. 13:58

Ответы на вопрос 3

Похожие вопросы

Answer 1

Проблема может быть связана со следующими причинами:

1. Некорректное использование `<CSSTransition>` компонента. Убедитесь, что вы правильно импортируете компонент `CSSTransition` из библиотеки `react-transition-group`. Например: `import { CSSTransition } from 'react-transition-group';`

2. Отсутствие или неправильное указание CSS-классов в `classNames` prop. Убедитесь, что значения CSS-классов в `classNames` точно соответствуют классам, определенным в вашем CSS-файле.

3. Неправильное использование `<TransitionGroup>`. `TransitionGroup` должен быть обернут в компонент `div` с определенным классом, например: `<div className="transition-group"> <TransitionGroup>...</TransitionGroup> </div>`. Убедитесь, что у вас есть соответствующий CSS-класс для обертки `div`.

4. Проблема с импортом классов из CSS-модуля. Убедитесь, что вы правильно импортируете классы из модуля CSS с использованием синтаксиса `import styles from './DropDawn.module.css'`.

Чтобы решить проблему с неработающим `CSSTransition`, выполните следующие шаги:

1. Проверьте правильность импорта компонента `CSSTransiton` и CSS-модуля.

2. Убедитесь, что значения CSS-классов в `classNames` соответствуют классам, определенным в вашем CSS-файле.

3. Убедитесь, что `<TransitionGroup>` правильно используется, и есть соответствующий CSS-класс для обертки `div`.

4. Проверьте, что компонент `<li>` имеет значение `className={styles.dropDawnItem}`, и убедитесь, что этот класс правильно определен в CSS-файле.

5. Проверьте, что CSS-классы `.dropDawnItemEnter`, `.dropDawnItemEnterActive`, `.dropDawnItemExit` и `.dropDawnItemExitActive` соответствуют классам, заданным в вашем CSS-файле.

Если после этих шагов проблема не решится, попробуйте добавить `console.log` или `debugger` в компонент `CSSTransition`, чтобы увидеть, выполняется ли ваш код для анимации вообще или есть ли какие-либо ошибки в консоли разработчика.

Answer 2

key={uniqid()} - неприемлемо использовать такой подход. Ключи должны оставаться постоянными при каждом рендере компонента, это их основная функция.

Answer 3

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