Анимация текстовых переходов

Эта статья — перевод оригинальной статьи «Text Replace Transitions«

Также я веду телеграм канал “Frontend по-флотски”, где рассказываю про интересные вещи из мира разработки интерфейсов.

Вступление

Начнём с хорошего, финальная демка, как будто вы прочитали всё до конца.

https://codepen.io/argyleink/pen/KKBWwMr

Если вы видите ошибку поддержки, вот запись его работы в Chrome Canary (с включенным этим флагом ?.

tldr;

view-transition позволяет мне с помощью CSS описать, как убрать старое текстовое состояние и показать новое текстовое состояние.

Вдохновение

Идея этой демонстрации пришла из игры Session Skate. В начальных титрах «SESSION» каждая буква быстро исчезает. Это выглядело довольно круто, и я сразу понял, что могу сделать это с помощью view-transition, setInterval() и .textContent. Итак, я завёл себе задачу в todo, чтобы сделать это, потому что пришло время заняться фигнёй, а не работой.

Это превратилось в небольшой прототип. Взгляните на эти баребоны!

setInterval(() => {   document.startViewTransition(() => {     h1.textContent = word[index++]     if (index >= word.length) index = 0   }) }, 500)

1. Каждые полсекунды.

2. Сделай снепшот предыдущего состояния.

3. Задай новый текст.

Когда работа завершается в коллбэке функции startViewTransition, браузер бесплатно интерполирует изменения для вас. В нашем случае была «V», теперь «i». Одна буква исчезла, одна буква появилась. Получаем кроссфейд!

https://codepen.io/argyleink/pen/BaPWpmQ

Оно. Мы сделали как в игре.

Настройка перехода

Кроссфейды — это круто (и вы все тоже), но что, если я захочу настроить, как будет меняться текст? Возможно, с чем-то типо Open Props?

Не проблема ??

Во-первых, сделаем импорт easings и animation:

@import "https://unpkg.com/open-props/easings.min.css"; @import "https://unpkg.com/open-props/animations.min.css";

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

html {   view-transition-name: none; }

Теперь, когда мы сказали, что мы не хотим переходить, давайте уточним, что следует делать, h1!

h1 {   /* be stable. fix that width. */   inline-size: 1em;      /* required for view-transitions        now it's not the whole page */   contain: layout;      /* yo browser; transition this! */   view-transition-name: replace-effect; }

Запомните что view-transition-name может ссылаться на своё состояния до и после в следующем этапе.

Теперь самое приятное

Используйте некоторые из этих пропсов, чтобы организовать появление и исчезновение буквы/снепшотов DOM. Начнем с того, как должна выйти предыдущая букву; давайте посмотрим, я хочу, чтобы она масштабировалась, например, от меня, и исчезала в то же время.

@media (prefers-reduced-motion: no-preference) {   html::view-transition-old(replace-effect) {     animation:        var(--animation-fade-out),       var(--animation-scale-down);   } }

Восхитительная магия

Теперь для появления элемента; затемните его, сдвинув вверх!

@media (prefers-reduced-motion: no-preference) {   html::view-transition-new(replace-effect) {     z-index: 1;     animation:        var(--animation-fade-out) reverse,       var(--animation-slide-in-up);   } }

анимация затухания инвертируется, поэтому непрозрачность не нужно устанавливать на 0.

Меняйте и подбирайте пропсы для анимации в этом Codepen и получайте удовольствие ?

https://codepen.io/argyleink/pen/KKBWwMr

Заключение

Внесите изменения в DOM, скажите как анимировать изменения. Влюбитесь.