Кастомные переходы

В библиотеке MUI (Material-UI) кастомные переходы позволяют управлять анимацией компонентов при их появлении, исчезновении или изменении состояния. В MUI за анимацию отвечает компонент и его производные, такие как , , и . Все они основаны на библиотеке react-transition-group, что обеспечивает гибкость и контроль над жизненным циклом анимации.

Компонент Transition

Transition — базовый компонент для создания кастомных переходов. Он принимает несколько ключевых свойств:

  • in — булевое значение, которое контролирует состояние видимости компонента. При true начинается анимация появления, при false — исчезновения.
  • timeout — время в миллисекундах для завершения перехода. Можно задать число или объект вида { enter: 300, exit: 200 }.
  • onEnter, onEntering, onEntered, onExit, onExiting, onExited — колбэки для отслеживания этапов анимации.

Пример кастомного перехода с использованием Transition:

import { Transition } from 'react-transition-group';

const duration = 300;

const defaultStyle = {
  transition: `opacity ${duration}ms ease-in-out`,
  opacity: 0,
};

const transitionStyles = {
  entering: { opacity: 1 },
  entered: { opacity: 1 },
  exiting: { opacity: 0 },
  exited: { opacity: 0 },
};

function Fade({ in: inProp, children }) {
  return (
    
      {(state) => (
        

          {children}
        

      )}
    
  );
}

В этом примере создаётся плавное появление и исчезновение элемента через изменение прозрачности.

Использование встроенных переходов MUI

MUI предоставляет готовые компоненты переходов для типовых эффектов:

  1. Fade — плавное появление/исчезновение.

    
  Контент

    Поддерживает свойства timeout и easing.

  2. Grow — масштабирование с эффектом «вырастания».

    Можно комбинировать с transformOrigin для изменения точки масштабирования.

  3. Slide — смещение с направления (left, right, up, down).

    
  Выдвижной блок

  4. Zoom — увеличение/уменьшение с центральной точки.

    
  +

Все встроенные компоненты поддерживают кастомизацию времени анимации через timeout и easing функции через style или тему MUI.

Кастомизация с помощью styled и темы

Для расширенной настройки переходов можно использовать функцию styled или объект темы. Например, создание Fade с кастомной длительностью через тему:

import { styled } from '@mui/material/styles';
import Paper from '@mui/material/Paper';
import Fade from '@mui/material/Fade';

const CustomFadePaper = styled(Paper)(({ theme }) => ({
  transition: theme.transitions.create('opacity', {
    duration: theme.transitions.duration.complex,
    easing: theme.transitions.easing.sharp,
  }),
}));

function App({ open }) {
  return (
    
      
        Контент с кастомным переходом
      
    
  );
}

theme.transitions.create позволяет задавать свойства CSS, на которые будет распространяться анимация, с соблюдением стандартов Material Design.

Последовательные и комбинированные анимации

Иногда необходимо запускать несколько переходов один за другим или одновременно. Для этого применяются:

  • Композиция переходов — обертывание компонентов в несколько переходов.
  • TransitionGroup — контейнер для управления списком анимируемых элементов. Он автоматически применяет enter и exit к дочерним компонентам.

Пример с TransitionGroup:

import { TransitionGroup } from 'react-transition-group';
import Collapse from '@mui/material/Collapse';

function TodoList({ items }) {
  return (
    
      {items.map(item => (
        
          {item.text}
        
      ))}
    
  );
}

В этом примере элементы списка плавно добавляются и удаляются с анимацией Collapse.

Управление порядком и синхронизация

Для сложных интерфейсов важна синхронизация анимаций. Используются свойства timeout и колбэки жизненного цикла:

  • onEnter(node, isAppearing) — перед началом анимации появления.
  • onEntering(node, isAppearing) — во время активного появления.
  • onEntered(node, isAppearing) — после завершения появления.
  • onExit(node) — перед началом исчезновения.
  • onExiting(node) — во время активного исчезновения.
  • onExited(node) — после завершения исчезновения.

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

Динамическая анимация свойств

Помимо opacity и transform, MUI поддерживает анимацию любых CSS-свойств с помощью sx или styled. Пример анимации цвета и смещения:

import Box from '@mui/material/Box';
import { Transition } from 'react-transition-group';

const duration = 500;

const defaultStyle = {
  transition: `all ${duration}ms ease-in-out`,
  transform: 'translateX(-50px)',
  backgroundColor: '#f0f0f0',
};

const transitionStyles = {
  entering: { transform: 'translateX(0)', backgroundColor: '#a0d2ff' },
  entered: { transform: 'translateX(0)', backgroundColor: '#a0d2ff' },
  exiting: { transform: 'translateX(-50px)', backgroundColor: '#f0f0f0' },
  exited: { transform: 'translateX(-50px)', backgroundColor: '#f0f0f0' },
};

function AnimatedBox({ in: inProp }) {
  return (
    
      {(state) => (
        
      )}
    
  );
}

Такой подход даёт полный контроль над поведением компонентов при появлении и исчезновении, позволяя создавать уникальные пользовательские интерфейсы с плавными переходами.

Использование easings и кривых Бэзье

Для более выразительных анимаций MUI поддерживает различные кривые переходов через свойство easing:

  • theme.transitions.easing.easeInOut — стандартное плавное появление и исчезновение.
  • theme.transitions.easing.sharp — резкие ускорения и замедления.
  • Пользовательские cubic-bezier кривые для тонкой настройки анимации.

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

import { styled } from '@mui/material/styles';
import Paper from '@mui/material/Paper';
import Fade from '@mui/material/Fade';

const CustomEasePaper = styled(Paper)(({ theme }) => ({
  transition: theme.transitions.create('opacity', {
    duration: 500,
    easing: 'cubic-bezier(0.68, -0.55, 0.27, 1.55)',
  }),
}));


  Контент с уникальной кривой

Так можно добиться эффекта «пружины» или замедленного старта анимации.

Оглавление