В React переходы CSS можно реализовать различными методами. Вот несколько подходов, которые вы можете использовать:

1. Переходы CSS со встроенными стилями. Вы можете определить переходы CSS внутри строки, используя атрибут styleв JSX. Это позволяет анимировать свойства CSS при выполнении определенного условия или при подключении или отключении компонента.

Пример:

import React, { useState } from 'react';
const App = () => {
  const [isExpanded, setIsExpanded] = useState(false);
  const toggleExpand = () => {
    setIsExpanded(!isExpanded);
  };
  return (
    <div
      style={{
        height: isExpanded ? '200px' : '100px',
        transition: 'height 0.5s ease',
      }}
    >
      <button onClick={toggleExpand}>Toggle Expand</button>
    </div>
  );
};
export default App;

2. Переходы CSS с модулями CSS. Если вы используете модули CSS, вы можете определить переходы CSS в отдельном файле CSS и импортировать их в свой компонент. Это помогает сохранить ваши стили CSS организованными и модульными.

Пример:

import React, { useState } from 'react';
import styles from './App.module.css';
const App = () => {
  const [isExpanded, setIsExpanded] = useState(false);
  const toggleExpand = () => {
    setIsExpanded(!isExpanded);
  };
  return (
    <div className={`${styles.container} ${isExpanded ? styles.expanded : ''}`}>
      <button onClick={toggleExpand}>Toggle Expand</button>
    </div>
  );
};
export default App;

CSS (App.module.css):

.container {
  height: 100px;
  transition: height 0.5s ease;
}
.expanded {
  height: 200px;
}

3. Библиотеки CSS-in-JS. Для React также доступны различные библиотеки CSS-in-JS, такие как styled-Components, Emotion и Radium. Эти библиотеки позволяют вам писать стили CSS непосредственно в коде JavaScript, включая переходы.

Пример использования стилевых компонентов:

import React, { useState } from 'react';
import styled from 'styled-components';
const Container = styled.div`
  height: ${props => (props.isExpanded ? '200px' : '100px')};
  transition: height 0.5s ease;
`;
const App = () => {
  const [isExpanded, setIsExpanded] = useState(false);
  const toggleExpand = () => {
    setIsExpanded(!isExpanded);
  };
  return (
    <Container isExpanded={isExpanded}>
      <button onClick={toggleExpand}>Toggle Expand</button>
    </Container>
  );
};
export default App;