Chrome Dev Summit 2018 is happening now and streaming live on YouTube. Watch now.

Создание анимации модальных представлений

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

TL;DR

  • Модальные представления не следует использовать слишком часто; пользователям очень не понравится, если их работу прерывать без надобности.
  • Добавление масштабирования к анимации позволяет получить зрелищный эффект 'выпадения'.
  • Когда пользователь закрывает модальное представление, оно должно исчезать с экрана быстро. А вот выводить его на экран следует немного медленнее, чтобы это было не так неожиданно для пользователя.

Создание анимации модального представления.

См. образец.

Модальное наложение должно быть выровнено по viewport, поэтому его свойству position следует задать значение fixed:

.modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;

  pointer-events: none;
  opacity: 0;

  will-change: transform, opacity;
}

Начальное значение его свойства opacity равно 0, поэтому это представление не отображается, но кроме того, свойству pointer-events также необходимо задать значение none, с тем, чтобы представление не реагировало на нажатия. В противном случае будет заблокировано все взаимодействие и вся страница перестанет реагировать на действия пользователя. И наконец, поскольку эффекты анимации будут добавлены к свойствам opacity и transform, эти свойства необходимо обозначить как изменяющиеся с помощью атрибута will-change (см. также Использование свойства will-change).

Когда представление отображается на экране, оно должно реагировать на действия пользователя, а его свойство opacity должно иметь значение 1:

.modal.visible {
  pointer-events: auto;
  opacity: 1;
}

Теперь каждый раз, когда необходимо отобразить модальное представление, можно переключать класс "visible" с помощью JavaScript:

modal.classList.add('visible');

В этот момент модальное представление откроется вообще без анимации, которую теперь можно добавить (см. также Изменение скорости при нестандартной анимации):

.modal {
  -webkit-transform: scale(1.15);
  transform: scale(1.15);

  -webkit-transition:
    -webkit-transform 0.1s cubic-bezier(0.465, 0.183, 0.153, 0.946),
    opacity 0.1s cubic-bezier(0.465, 0.183, 0.153, 0.946);

  transition:
    transform 0.1s cubic-bezier(0.465, 0.183, 0.153, 0.946),
    opacity 0.1s cubic-bezier(0.465, 0.183, 0.153, 0.946);

}

При добавлении свойства scale к свойству transform представление будет как бы падать на экран ― довольно зрелищный эффект. Стандартный переход применяется и к свойству transform, и к свойству opacity с нестандартной кривой и продолжительностью в 0,1 секунды.

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

.modal.visible {

  -webkit-transform: scale(1);
  transform: scale(1);

  -webkit-transition:
    -webkit-transform 0.3s cubic-bezier(0.465, 0.183, 0.153, 0.946),
    opacity 0.3s cubic-bezier(0.465, 0.183, 0.153, 0.946);

  transition:
    transform 0.3s cubic-bezier(0.465, 0.183, 0.153, 0.946),
    opacity 0.3s cubic-bezier(0.465, 0.183, 0.153, 0.946);

}

Теперь модальное представление появляется на экране в течение 0,3 секунды, что выглядит не так агрессивно, а исчезает с экрана быстро, и это понравится пользователям.