Задержка появления

В библиотеке MUI (Material-UI) для React существует несколько подходов к реализации задержки появления компонентов, что позволяет создавать плавные анимации, улучшать UX и оптимизировать рендеринг. Основной инструмент для этого — компонент Fade, но также применяются Grow, Collapse и Slide.

Компонент Fade

Компонент Fade используется для плавного проявления и исчезновения дочернего элемента. Его ключевое свойство — in, которое управляет видимостью компонента.

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

function FadeExample() {
  const [visible, setVisible] = useState(false);

  return (
    <>
      <Button onCl ick={() => setVisible(prev => !prev)}>Toggle Fade</Button>
      <Fade in={visible} timeout={1000}>
        <div style={{ width: 200, height: 100, backgroundColor: 'skyblue' }}>Пример Fade</div>
      </Fade>
    </>
  );
}

Ключевые моменты:

  • timeout определяет длительность анимации в миллисекундах.
  • in={true} инициирует появление, in={false} — исчезновение.
  • Для управления задержкой появления можно использовать setTimeout перед изменением состояния.

Добавление задержки через timeout

MUI позволяет задавать отдельные значения для появления и исчезновения:

<Fade
  in={visible}
  timeout={{ enter: 500, exit: 1500 }}
>
  <div>Задержка появления и скрытия</div>
</Fade>
  • enter — длительность анимации появления.
  • exit — длительность анимации исчезновения.
  • Позволяет создавать асимметричные анимации, например, медленное появление и быстрое исчезновение.

Использование TransitionProps

Для более точного контроля можно передавать объект TransitionProps. Он поддерживает onEnter, onEntered, onExit, onExited для отслеживания этапов анимации.

<Fade
  in={visible}
  timeout={1000}
  TransitionProps={{
    onEnter: () => console.log('Начало появления'),
    onEntered: () => console.log('Появление завершено'),
  }}
>
  <div>Контролируемая анимация</div>
</Fade>

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

Компонент Grow

Grow похож на Fade, но добавляет эффект масштабирования при появлении:

import { Grow } from '@mui/material';

<Grow in={visible} timeout={800}>
  <div>Появление с масштабированием</div>
</Grow>
  • Эффект выглядит более «живым», чем простое затухание.
  • Используется для акцентирования новых элементов интерфейса, таких как карточки или всплывающие окна.

Компонент Collapse

Collapse управляет развертыванием по высоте:

import { Collapse } from '@mui/material';

<Collapse in={visible} timeout={500}>
  <div>Контент появляется с разворачиванием</div>
</Collapse>
  • Полезно для списков, аккордеонов и скрываемых панелей.
  • Можно комбинировать с Fade для одновременного эффекта прозрачности и изменения размера.

Компонент Slide

Slide позволяет компоненту появляться с движением по направлению:

import { Slide } from '@mui/material';

<Slide direction="up" in={visible} timeout={700}>
  <div>Выдвигающийся элемент</div>
</Slide>
  • direction задаёт направление появления: up, down, left, right.
  • Особенно эффективен для уведомлений, тултипов и всплывающих модальных окон.

Задержка через setTimeout

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

const [visible, setVisible] = useState(false);

const showWithDelay = () => {
  setTimeout(() => {
    setVisible(true);
  }, 1000); // задержка 1 секунда
};

<Button onCl ick={showWithDelay}>Показать с задержкой</Button>
  • Позволяет создавать эффект постепенного появления компонентов при загрузке страницы.
  • Можно использовать в сочетании с анимациями Fade, Grow или Slide.

Практические советы

  • Для элементов с небольшими задержками (до 300 мс) лучше использовать только timeout в MUI-компонентах.
  • Для сложных сценариев с последовательными анимациями рекомендуется комбинировать TransitionProps и setTimeout.
  • Избегать длинных задержек без визуальной обратной связи, чтобы не ухудшать UX.

Если необходимо, можно создавать каскадные появления нескольких компонентов, задавая разную задержку каждому через timeout или через отдельные стейты и setTimeout. Такой подход часто используется в галереях, карточках продуктов и интерфейсах с динамическим контентом.

Оглавление