@view-transition

navigation

Указывает, какое влияние это правило окажет на поведение перехода отображения документа. Возможные значения:

• auto: Документ будет участвовать в переходе отображения при навигации, если навигация происходит на одном источнике, без перенаправлений с разных источников, и ее navigationType является traverse, push или replace. В случае push или replace, навигация должна быть инициирована пользователем, взаимодействующим с содержимым страницы, а не функцией пользовательского интерфейса браузера.

• none: Документ не будет участвовать в переходе отображения.

@view-transition = 
  @view-transition { <declaration-list> }  

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

Правило @view-transition указано в CSS для текущего и целевого документов перехода, чтобы они оба участвовали в переходе отображения:

@view-transition {
  navigation: auto;
}

В дополнение к правилу @view-transition мы определяем две @keyframe анимации и используем сокращенное свойство animation, чтобы применить эти ключевые кадры анимации к элементам на выходящей (::view-transition-old()) и входящей (::view-transition-new()) страницах, которые мы хотим анимировать.

/* Create a custom animation */
@keyframes move-out {
  from {
    transform: translateY(0%);
  }

  to {
    transform: translateY(-100%);
  }
}

@keyframes move-in {
  from {
    transform: translateY(100%);
  }

  to {
    transform: translateY(0%);
  }
}

/* Apply the custom animation to the old and new page states */
::view-transition-old(root) {
  animation: 0.4s ease-in both move-out;
}

::view-transition-new(root) {
  animation: 0.4s ease-in both move-in;
}

Посмотрите это демо-приложение перехода многостраничного приложения в действии.

• ::view-transition
• ::view-transition-new()
• ::view-transition-old()
• ::view-transition-group()
• ::view-transition-image-pair()
• API переходов отображения
• CSS правила
• Функции CSS правил