Анимация раскрытия

В библиотеке MUI для управления анимацией раскрытия элементов чаще всего используется компонент Collapse. Этот компонент позволяет плавно изменять высоту содержимого, создавая эффект появления или исчезновения блока.

Основные свойства компонента Collapse

  • in – логическое значение, определяющее, открыт ли компонент. При изменении с false на true запускается анимация раскрытия, и наоборот.
  • timeout – задаёт длительность анимации в миллисекундах или предустановленные значения: 'auto', 'short', 'standard', 'long'. Значение 'auto' автоматически подбирает время анимации в зависимости от высоты содержимого.
  • collapsedSize – определяет высоту компонента в закрытом состоянии. По умолчанию равна 0px.
  • orientation – направление анимации: 'vertical' (по умолчанию) или 'horizontal'.

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

import React, { useState } from 'react';
import { Collapse, Button, Box } from '@mui/material';

function ExampleCollapse() {
  const [open, setOpen] = useState(false);

  return (
    

      
      
        
          Содержимое, которое плавно раскрывается и скрывается
        
      
    

  );
}

Анимация с использованием Transition

MUI использует библиотеку react-transition-group под капотом для управления состояниями анимации. Компонент Collapse расширяет стандартный Transition, предоставляя следующие состояния:

  • entering – начало раскрытия.
  • entered – полностью раскрыт.
  • exiting – начало закрытия.
  • exited – полностью закрыт.

Эти состояния можно использовать для кастомной стилизации через sx или styled:


  Плавное появление с изменением прозрачности

Вложенные анимации

Collapse может использоваться внутри других компонентов с анимацией, например Accordion. Это позволяет создавать сложные интерактивные интерфейсы с несколькими уровнями раскрытия.

import { Accordion, AccordionSummary, AccordionDetails, Typography } from '@mui/material';
import ExpandMoreIcon from '@mui/icons-material/ExpandMore';


  }>
    Заголовок аккордеона
  
  
    
      Вложенный контент с плавной анимацией

Горизонтальная анимация

По умолчанию Collapse раскрывает контент по вертикали. Для горизонтального раскрытия используется свойство orientation="horizontal". В этом случае collapsedSize указывает ширину закрытого состояния.


  
    Горизонтальное раскрытие

Управление анимацией через состояние компонента

Для более сложных сценариев можно комбинировать Collapse с useState или useReducer и управлять моментом раскрытия в зависимости от данных или пользовательских действий. Это особенно полезно для динамических списков, где элементы добавляются и удаляются.

const [items, setItems] = useState(['Элемент 1', 'Элемент 2']);

function addItem() {
  setItems([...items, `Элемент ${items.length + 1}`]);
}

function removeItem() {
  setItems(items.slice(0, -1));
}

{items.map((item, index) => (
  
    {item}
  
))}

Настройка easing и задержки

Для более плавной или специфичной анимации можно задавать CSS-свойства transitionTimingFunction и transitionDelay через sx или styled:


  Кастомная кривая и задержка анимации

Эти приёмы позволяют точно контролировать скорость, плавность и последовательность раскрытия, что особенно важно в интерфейсах с множеством интерактивных элементов.

Оглавление