Анимации и переходы

Анимации и переходы в Inferno реализуются через управление состоянием компонентов и работу с виртуальным DOM. Фреймворк предоставляет высокую производительность за счет минимизации изменений в реальном DOM, что делает анимации плавными и отзывчивыми. Основной подход заключается в контроле за состояниями компонентов и применении классов CSS или inline-стилей для создания визуальных эффектов.

Работа с состоянием для анимаций

Анимации часто завязаны на изменение состояния компонента. Например, при добавлении нового элемента в список можно использовать состояние isVisible для включения анимации появления:

import { Component } from 'inferno';

class FadeInComponent extends Component {
  state = { isVisible: false };

  componentDidMount() {
    this.setState({ isVisible: true });
  }

  render() {
    const { isVisible } = this.state;
    return (
      <div className={`fade ${isVisible ? 'show' : ''}`}>
        Появляющийся элемент
      </div>
    );
  }
}

CSS-классы управляют переходами:

.fade {
  opacity: 0;
  transition: opacity 0.5s ease-in-out;
}

.fade.show {
  opacity: 1;
}

Плавные переходы при обновлении элементов

Inferno эффективно обновляет только изменившиеся элементы. Это позволяет реализовать плавные переходы при изменении контента:

<ul>
  {this.state.items.map(item => (
    <li key={item.id} className={`item ${item.isUpdated ? 'highlight' : ''}`}>
      {item.text}
    </li>
  ))}
</ul>

CSS-анимация для обновленных элементов:

.item {
  transition: background-color 0.3s ease;
}

.item.highlight {
  background-color: yellow;
}

Использование уникального key позволяет Inferno отслеживать изменения и применять анимацию только к нужным элементам, избегая перерисовки всего списка.

Встроенные анимации через `ref` и lifecycle методы

Для более сложных анимаций, например, с контролем времени и последовательности, используется прямой доступ к DOM через ref и методы жизненного цикла компонента:

import { Component } from 'inferno';

class SlideComponent extends Component {
  node = null;

  componentDidMount() {
    const el = this.node;
    el.style.transform = 'translateX(-100%)';
    requestAnimationFrame(() => {
      el.style.transition = 'transform 0.5s ease';
      el.style.transform = 'translateX(0)';
    });
  }

  render() {
    return (
      <div ref={ref => (this.node = ref)} className="slide">
        Слайдовый элемент
      </div>
    );
  }
}

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

Анимация удаления элементов

Удаление элемента с анимацией требует сохранения его в DOM до завершения эффекта. Для этого можно использовать локальное состояние и таймер:

removeItem(id) {
  this.setState(prevState => ({
    items: prevState.items.map(item =>
      item.id === id ? { ...item, isRemoving: true } : item
    )
  }));
  setTimeout(() => {
    this.setState(prevState => ({
      items: prevState.items.filter(item => item.id !== id)
    }));
  }, 500);
}

CSS-анимация для удаления:

.item.isRemoving {
  opacity: 0;
  transform: translateY(-20px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}

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

Интеграция с CSS-анимациями и библиотеками

Inferno не ограничивает использование стандартных CSS-анимаций и внешних библиотек вроде GSAP или Anime.js. Ключевой принцип — управление состояниями компонентов и связывание их с анимационными классами или стилями. Например, при использовании GSAP можно анимировать ref-элементы прямо в методе componentDidMount или в эффектах функциональных компонентов через useEffect (при использовании Inferno Hooks).