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

Анимацию можно легко сделать через CSS свойство transition например для кнопок, меню и т.д. Подробнее на htmlbook.ru.

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

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

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

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

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

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

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

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

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

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

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

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

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

Читайте также:  Wi-Fi Calling: что это такое, как включить функцию вызовы по WiFi

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); } }Панель открыта

Когда, при изменении хэша в 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>

Событие transitionend

На конец CSS-анимации можно повесить обработчик на событие transitionend.

Это широко используется, чтобы после анимации сделать какое-то действие или объединить несколько анимаций в одну.

Например, лодочка в примере ниже при клике начинает плавать туда-обратно, с каждым разом уплывая всё дальше вправо:

Её анимация осуществляется функцией go, которая перезапускается по окончании, с переворотом через CSS:

= function() { //… var times = 1; function go() { if (times % 2) { // плывём вправо (‘back’); = 100 * times + 200 + ‘px’; } else { // плывём влево (‘back’); = 100 * times — 200 + ‘px’; } } go(); (‘transitionend’, function() { times++; go(); }); };

Объект события transitionend содержит специфические свойства:

propertyName Свойство, анимация которого завершилась. elapsedTime Время (в секундах), которое заняла анимация, без учёта transition-delay.

Свойство propertyName может быть полезно при одновременной анимации нескольких свойств. Каждое свойство даст своё событие, и можно решить, что с ним делать дальше.