Представляем AutoAnimate - добавьте анимацию в ваши приложения с помощью одной строки кода.

Когда дело доходит до создания пользовательских интерфейсов, небольшая анимация не помешает. Добавляете ли вы задачу в список дел, удаляете контакт или сортируете список воспроизведения, интерфейсы с едва уловимым движением, несомненно, обеспечивают лучший пользовательский опыт. Если мы знаем, что анимация лучше - почему мы так редко ее добавляем?

Ответ прост - на это уходит слишком много времени. В конце концов, время - деньги, а оптимизация "незначительных" деталей UX часто выходит за рамки бюджета всех, кроме самых крупных брендов.

По правде говоря, добавление анимации пользовательского интерфейса может быть болезненным - особенно для новых, удаленных и перемещенных элементов DOM. Например, при анимации добавления нового элемента в список опытный разработчик может поступить следующим образом:

• Измерить родительский элемент и явно установить его max-height, а также добавить класс с css-переходами для max-height.
• Добавить класс к новому элементу списка до его добавления в DOM, который задает его начальную непрозрачность и состояние трансформации (возможно, небольшой сдвиг вниз).
• Вставить элемент и установить очень короткий тайм-аут, который удалит исходный класс.
• Вычислить высоту добавляемого элемента и увеличить max-height родительского элемента на эту величину.
• Дождаться полного перехода высоты и удалить явные свойства max-height.

Это не очень весело! Начните использовать AutoAnimate.

AutoAnimate - это легкая (1.9Kb), с нулевой конфигурацией, встраиваемая библиотека анимации, которая автоматически применяет анимацию перехода к элементам, добавляемым, удаляемым или перемещаемым в DOM. Для ее реализации требуется буквально одна строка кода. Она работает с React, Vue и любым другим фреймворком JavaScript.

Цель AutoAnimate - существенно улучшить пользовательский опыт приложения без ущерба для времени реализации и производительности разработчика.

Давайте посмотрим на два одинаковых списка, написанных на React - один с AutoAnimate, а другой без него.

Детали списка - это обычный код React, но давайте посмотрим, как анимация была добавлена во второй список:

import React from 'react';
import FrameworkList from './FrameworkList';
import { useAutoAnimate } from '@formkit/auto-animate/react';

export default function App() {
  const [animationParent] = useAutoAnimate();
  return (
    <section className="comparison">
      <FrameworkList />
      <FrameworkList ref={animationParent} />
    </section>
  );
}

Конечно, AutoAnimate отлично работает и с обычным JavaScript! Все, что вам нужно сделать, это передать родительский элемент DOM в функцию autoAnimate:

const el = document.getElementById('#my-el')
autoAnimate(el)

Если вы посчитаете, что AutoAnimate будет вам полезен, то вот ссылка на AutoAnimate репозиторий