Как применить CSS-переходы к компоненту React, который возвращает ноль, когда он не открыт? - PullRequest
Новая
       35

Как применить CSS-переходы к компоненту React, который возвращает ноль, когда он не открыт?

0 голосов
/ 02 мая 2019

Я пытаюсь найти лучший способ добавить CSS-переходы в навигационное меню боковой панели, которое монтируется в правой части экрана и скользит справа. В настоящее время этот компонент структурирован примерно так: react-transition-group: 

const Sidebar = ({ children, isClosed }) => {
  if (isClosed) return null;

  return (
    <CSSTransition
      in={!isClosed}
      timeout={350}
      enter
      exit
    >
      <div className={classes}>
        {children}
      </div>
    </CSSTransition>
  );
};

Из того, что я могу сказать по просмотру в Интернете, действие применения CSSTransition к компоненту автоматически реализует базовый набор переходов, которые затем можно улучшить. Хотя я не получаю никаких ошибок (консольных или иных), переходы тоже не работают.

Если бы кто-то мог указать мне правильное направление относительно того, что я делаю неправильно в этой настройке, это было бы очень ценно. Это как-то связано с тем, как я отображаю компонент (возвращая ноль, если закрыт, иначе возвращая компонент)?

В качестве альтернативы, как еще я могу посмотреть на обработку перехода? Я пробовал использовать transform3d, но так как div не существует до его открытия, преобразовать из него нечего.

...