API View Transition позволяет обновлять DOM за один шаг, создавая при этом анимированный переход между двумя состояниями.
Подобные переходы были часто запрашиваемой функцией разработчиков, в том числе и меня, и я думаю, что нам удалось реализовать ее таким образом, чтобы сбалансировать хорошие настройки по умолчанию с расширяемостью и настройкой. Звучит так, будто мы похлопываем себя по плечу, но отзывы разработчиков сыграли ключевую роль в разработке этой функции. Более ранний прототип этой функции был гораздо менее гибким, и люди (например, вы?), которые нашли время поиграть с прототипами и оставить отзыв, вызвали полное переосмысление. Спасибо!
Чтобы разобраться с этой функцией и поиграть с некоторыми демоверсиями, ознакомьтесь с нашим руководством . Если, по вашему мнению, что-то здесь не описано, свяжитесь со мной в Twitter , Mastodon или по электронной почте .
API View Transition в настоящее время доступен только в Chrome; к счастью, его можно использовать в качестве прогрессивного улучшения. Руководство включает вспомогательную функцию , которую можно использовать в разных браузерах, но анимацию получат только те браузеры, которые поддерживают переходы между представлениями.
Мы разработали эту функцию в рамках рабочей группы CSS при участии других поставщиков браузеров и независимых специалистов. Мы не знаем, будут ли другие браузеры использовать View Transitions и когда это произойдет, но следите за позицией стандартов Mozilla и позицией стандартов WebKit .
Но мы еще не «закончили»!
Функциональность Chrome 111 — это только первый выпуск. Мы надеемся, что уже нашли все ошибки, но, пожалуйста, сообщайте о любых обнаруженных проблемах на crbug.com , желательно с сокращенной демо-версией. Если это вам не знакомо или не устраивает, свяжитесь со мной в Twitter , Mastodon или по электронной почте , и я помогу.
Этот выпуск — небольшая, но, надеюсь, полезная часть более широкой картины. Мы уже набросали некоторые расширения этой функции, чтобы обеспечить совместимость деталей, которые мы поставляем сегодня, с будущим.
Вот краткий обзор того, о чем мы думаем. Они не расположены в порядке приоритета (ну, возможно, первое из них является наиболее важным для многих людей), поэтому мы будем рады получить отзывы о том, какие дополнения наиболее важны для вас.
Переходы между документами
Думаю, большинство разработчиков хотят, чтобы мы работали над этим в ближайшее время, и хорошая новость в том, что мы уже работаем над этим!
API View Transitions был разработан таким образом, чтобы он мог работать с документами одного и того же происхождения. Единственная разница заключается в том, что вместо того, чтобы startViewTransition сигнализировать об изменении состояния DOM, об этом изменении будет сигнализировать сама навигация.
Наш прототип стоит за флагом chrome://flags/#view-transition-on-navigation . Вот очень простая демонстрация и более сложная демонстрация .
Чтобы продвинуться вперед, нам нужно выяснить, как каждая страница соглашается на переход. Сейчас мы используем метатег: <meta name="view-transition" content="same-origin"> , но считаем, что CSS — лучшее место для этого. Мы также хотим, чтобы было проще узнать, с какой страницы вы переходите, желательно без необходимости писать JavaScript.
Нам предстоит много работы, и мы предпочитаем сделать ее «правильно», а не «быстро», но для нас это определенно приоритет.
Анимация, управляемая композитором
Мы решили по умолчанию анимировать ширину и высоту групп переходов, потому что их гораздо проще настроить. Однако это означает, что анимация выполняется в основном потоке, что не идеально, особенно во время загрузки страницы.
Мы планируем обнаружить анимации по умолчанию и общие настройки, а затем интерпретировать их как анимацию, управляемую композитором, для значительного повышения производительности.
Ограниченные переходы
В настоящее время переходы SPA распространяются на весь документ, и одновременно может выполняться только один переход. Мы хотим представить функцию, которая позволяет ограничить переходы конкретным элементом, чтобы несколько компонентов страницы могли выполнять переходы независимо.
Это позволит, скажем, встроенному видеоплееру использовать переходы просмотра одновременно со встроенным виджетом чата.
Вложенные группы переходов
На данный момент все ::view-transition-group являются братьями и сестрами. Зачастую это хорошо, поскольку позволяет представлениям переходить из одного контейнера в другой, и вам не нужно беспокоиться об обрезке.
Однако иногда требуется, чтобы представление было обрезано каким-либо родителем, который также может участвовать в переходе.
Мы хотим изучить возможность согласия, которое помещает определенную ::view-transition-group в другую ::view-transition-group .
Классы переходов
Каждое view-transition-name должно быть уникальным. Именно так мы определяем, что конкретный элемент концептуально «одинаков» по обе стороны от изменения DOM, даже если это не один и тот же элемент буквально.
Однако иногда вещи с разными view-transition-name должны использовать один и тот же тип анимации. На данный момент это означает добавление правила селектора для каждого view-transition-name .
Мы хотели бы добавить способ создания классов переходов , чтобы обойти это ограничение.
Игнорировать закадровые элементы
Если вы присвоите элементу view-transition-name , он будет участвовать в переходе как отдельная группа. Иногда это не идеально. Например, если вы присвоите заголовку view-transition-name и перейдете из состояния, в котором вы прокручены на 2000 пикселей вниз, в состояние вверху страницы, заголовок будет анимироваться на расстоянии 2000 пикселей. что кажется неправильным с точки зрения времени.
Вместо этого мы хотели бы добавить опцию, при которой элемент будет игнорироваться , как будто у него нет view-transition-name , если он полностью находится за пределами области просмотра.
Вы уже можете сделать это с помощью JavaScript, динамически установив style.viewTransitionName , но похоже, что для этого нам нужно иметь декларативное решение.
requestAnimationFrame-управляемая анимация
Вы уже можете создавать анимацию перехода просмотра с помощью JavaScript через API веб-анимации , но иногда вам нужно покадрово управлять объектом с помощью requestAnimationFrame .
Вы уже можете это сделать, но это немного хакерски. Вот демо-версия с некоторыми помощниками, которые могут оказаться вам полезными. Мы хотим сделать это не хакерским!
Мы сделаем это в двух частях. Во-первых, предоставляя API , указывающий, когда анимация завершена . И во-вторых, предоставляя доступ JavaScript к псевдоэлементам . Эта вторая часть может оказаться довольно большой работой, но в долгосрочной перспективе кажется, что это правильно.
Теперь сделайте несколько отличных переходов между видами!
Надеюсь, вы, как и я, в восторге от настоящего и будущего этой функции. Если у вас есть какие-либо отзывы или вы просто хотите продемонстрировать некоторые сделанные вами переходы между видами, будь они плавными и функциональными или просто глупыми , свяжитесь со мной в Twitter или Mastodon !