Анимирование списков, появления и исчезновения

Популярные сочетания transition и transform уже давно используются в разработке шаблонов сайтов. И сегодня мы немного поговорим об этих свойствах и разберем их детально.

Добавление звука к переходам между слайдами

  1. С левой стороны окна слайдов в области с вкладками «Структура» и «Слайды» выберите вкладку Слайды.

  2. Выберите эскизы слайдов, для которых хотите добавить звук перехода.

  3. На вкладке Переходы в группе Время показа слайдов щелкните стрелку рядом с элементом Звук и выполните одно из следующих действий:

    • Чтобы добавить звук из списка, выберите его.

    • Чтобы добавить звук, которого нет в списке, выберите вариант Другой звук, найдите нужный звуковой файл и нажмите кнопку Открыть.

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

Так как же это сделать?

Казалось бы, безвыходная ситуация, но это не так. Мы забыли про еще одно свойство, которое может нам в этом помочь. И это свойство max-height. Если вы уже догадались что делать дальше, отложите чтение этой стати и попробуйте реализовать анимацию сами. А потом возвращайтесь и сравните ваше решение с моим.

Чтобы все получилось, нужно сделать несколько шагов:

  1. Задать достаточно большую максимальную высоту, чтобы в дальнейшем анимировать её до нужных нам размеров;
  2. Установить overflow: hidden, чтобы содержимое скрывалось при анимации;
  3. Помнить про padding, а именно про то, что если он есть, то его тоже нужно будет анимировать до 0, чтобы наш блок полностью исчез;

Анимация высоты с 0 до auto

Демо можно посмотреть тут. Теперь мы умеем анимировать высоту через CSS. И теперь можем делать без javascript такие штуки, как: спойлеры, выпадающие меню, раскрывающиеся попапы и т.д.

CSS 3D-преобразования и переходы

Теперь панель навигации на мобильном экране накладывается поверх контента. Для sidebar надо добавить ещё немного CSS. Вот UX-цели, который разберём в следующем разделе:

  • Анимировать разворачивание/сворачивание
  • Анимировать с плавным движением, только если пользователь не возражает
  • Анимировать visibility, чтобы фокус клавиатуры не исчезал за пределы экрана

Реализовывать анимацию для движения боковой панели будем с учётом предпочтений пользователя.

Доступность движения

Кто-то не любит плавное движение при появлении боковой панели и предпочитает быстрое появление sidebar. Такое предпочтение можно учитывать с помощью настройки внутри медиа-запроса prefers-reduced-motion: reduce значения CSS-переменной —duration. Это учитывает предпочтения пользователя для движения (если доступно), настроенные в операционной системе.

#sidenav-open { —duration: .6s; } @media (prefers-reduced-motion: reduce) { #sidenav-open { —duration: 1ms; } }Демонстрация взаимодействия с применением duration и без неё.

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

Transition, transform, translate

Панель скрыта (по умолчанию)

Чтобы установить для боковой панели навигации на мобильном устройстве состояние по умолчанию, за пределами экрана, нужно спозиционировать элемент с помощью transform: translateX(-110vw).

Обратите внимание, к типовому значению -100vw для скрытия за пределы экрана, добавлены ещё 10vw, чтобы гарантировать, что тень блока боковой навигации не попадёт в видимую область окна, когда панель скрыта.

@media (max-width: 540px) { #sidenav-open { visibility: hidden; transform: translateX(-110vw); will-change: transform; transition: transform var(—duration) var(—easeOutExpo), visibility 0s linear var(—duration); } }Панель открыта

Читайте также:  5 отличий фитнес-трекера от фитнес-браслета

Когда, при изменении хэша в URL, :target соответствует HTML-элементу #sidenav-open, его надо спозиционировать с помощью translateX() в установленные для открытого состояния координаты 0 и наблюдать, как CSS переместит элемент из его исходной позиции -110vw в указанную, равную 0, в течение var(—duration) времени.

@media (max-width: 540px) { #sidenav-open:target { visibility: visible; transform: translateX(0); transition: transform var(—duration) var(—easeOutExpo); } }

Изменение видимости

Следующая цель — реализовать невидимость меню, когда sidebar скрыт, от программ чтения с экрана. Это нужно, чтобы фокус не переводился на меню, скрытое за пределами экрана. Для этого можно изменять CSS-свойство visibility панели при изменениях :target:

  • Когда панель появляется, чтобы она была видимой и на ней можно было сфокусироваться, не следует изменять свойство visibility.
  • Когда панель скрывается, visibility должно изменяться на hidden, но с задержкой, т.е. после того, как она покинет видимую часть окна

Указание длительности перехода

Vue может автоматически определить завершение перехода. По умолчанию, Vue ждет первого события transitionend или animationend на корневом элементе.

Но это не всегда может быть нужным — например, можно иметь хореографическую последовательность переходов, где внутренние элементы могут иметь задержку перед переходом или более длинный по времени переход, чем у корневого элемента.

В таких случаях с помощью опции duration на компоненте <transition> можно явно указать продолжительность перехода (в миллисекундах).

<transition :duration=»1000″>…</transition>

Еще можно указать отдельные значения продолжительностей начала и окончания перехода:

<transition :duration=»{ enter: 500, leave: 800 }»>…</transition>

Итого

CSS-анимации позволяют плавно или не очень менять одно или несколько свойств.

Альтернатива им – плавное изменение значений свойств через JavaScript, мы рассмотрим подробности далее.

Ограничения и достоинства CSS-анимаций по сравнению с JavaScript:

Читайте также:  Вот почему штатная очистка Windows 10 лучше CCleaner

Недостатки

  • Временная функция может быть задана кривой Безье или через шаги. Более сложные анимации, состоящие из нескольких кривых, реализуются их комбинацией при помощи CSS animations, но JavaScript-функции всегда гибче.
  • CSS-анимации касаются только свойств, а в JavaScript можно делать всё, что угодно, удалять элементы, создавать новые.
  • Отсутствует поддержка в IE9-

Достоинства

  • Простые вещи делаются просто.
  • «Легче» для процессора, чем анимации JavaScript, лучше используется графический ускоритель. Это очень важно для мобильных устройств.

Подавляющее большинство анимаций делается через CSS.

При этом JavaScript запускает их начало – как правило, добавлением класса, в котором задано новое свойство, и может отследить окончание через событие transitionend.