Анимация в одностраничном приложении - без навороченных библиотек

Сцена веб-разработки кардинально изменилась за последние несколько лет. Современные веб-разработчики имеют доступ к множеству библиотек и фреймворков JavaScript, таких как React.js, Angular и Vue.js, которые ускоряют разработку сложных веб-приложений. Хотя я большой поклонник современных фреймворков JavaScript, я не могу не чувствовать, что мы начинаем упускать из виду фундаментальные концепции.

Когда дело доходит до создания анимации в веб-приложении, у нас есть много вариантов. Возьмем, к примеру, React.js, есть такие библиотеки, как React Motion и React Transition Group. Эти библиотеки великолепны и служат своим конкретным целям, но почему бы не вернуться к основам и не использовать простые CSS и Javascript, когда вы пытаетесь сделать что-то простое?

Не забывайте, что CSS может для вас сделать

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

Допустим, мы хотим изменить цвет div при наведении указателя мыши на него в React.js. Конечно, мы могли бы добавить в div событие onMouseOver:

constructor() {  
  this.state = {divColor: 'white'};
}
render() {
  return (
    <div className="my-div" 
      style={{backgroundColor: this.state.divColor}} 
      onMouseOver={() => this.setState({divColor: 'red')}>
      Hello World
    </div>
  );
}

Но не проще ли просто добавить селектор наведения в свой класс CSS?

// in react component
render() {
  return (
    <div className="my-div">Hello World</div>
  );
}
// in .css
.my-div {
  background-color: 'white';
}
.my-div:hover {
  background-color: 'red';
}

В последнем подходе мы уменьшаем беспорядок JavaScript в компоненте React и изолируем стили в файле CSS.

Рассмотрим другой пример. Что, если мы хотим добавить какой-нибудь тип вводной анимации, когда компонент впервые появляется на экране? Конечно, мы можем использовать React Transition Group, чтобы представить анимацию при монтировании компонента, но мы также можем использовать ключевые кадры CSS:

// in react component
render() {
  return (
    <div className="my-div">Hello World</div>
  );
}
// in .css
.my-div {
  background-color: 'white';
  animation: fadeIn 1s;
}
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

Анимация на основе состояния компонента

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

Снова возьмем, к примеру, React.js:

// in react component
render() {
  return (
    <div className={this.state.alert ? 
           'my-div my-div--alert' : 
           'my-div'}>
       Hello World
    </div>
  );
}
// in .css
.my-div {
  background-color: 'white';
  transition: background-color 2s;
}
.my-div--alert {
  background-color: 'red';
}

В приведенном выше примере, когда предупреждение о состоянии переключается между истинным и ложным, цвет div с переходом между двумя цветами. Эту же технику можно использовать для перехода элементов в самые разные стили.

Итак, когда использовать модные библиотеки?

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

Я считаю, что:

React Motion отлично подходит для создания сложной, естественно выглядящей анимации, когда кадры должны располагаться в заранее определенной последовательности.

React Transition Group отлично подходит для управления анимацией со стадиями жизненного цикла компонента, такими как монтаж и демонтаж.

Заманчиво использовать модные библиотеки, но иногда их бывает слишком много. В следующий раз, когда мы добавим библиотеку анимации в проект, возможно, стоит рассмотреть более простые методы, которые позволят нам создать такой же пользовательский интерфейс.

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