@view-transition

Limited availability

This feature is not Baseline because it does not work in some of the most widely-used browsers.

@view-transition CSS at 规则用于在跨文档导航的情况下选择当前文档和目标文档进行视图过渡。

要使跨文档视图过渡正常工作，导航的当前文档和目标文档也需要同源。

语法

css
@view-transition {
  navigation: auto;
}

描述符

指定此规则对文档的视图过渡行为的影响。可能的值包括：

  • auto：如果导航是同源的，没有跨源重定向，并且其 navigationType 为 traverse、push 或 replace，则文档在参与导航时将经历视图过渡。对于 push 或 replace，导航必须由用户与页面内容交互来发起，而不是由浏览器 UI 功能发起。

  • none：该文档将不会经历视图过渡。

形式语法

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

示例

页面视图过渡

以下代码片段展示了页面过渡演示中使用的关键概念。该演示使用跨文档视图过渡；在网站的两个页面之间导航时发生的半秒的过渡。有关完整演示，请参阅视图过渡多页应用演示。

在 CSS 中为导航的当前文档和目标文档指定 @view-transition at 规则，以将它们都加入到视图过渡中：

css
@view-transition {
  navigation: auto;
}

除了 @view-transition at 规则之外，我们还使用 @keyframes at 规则定义两个关键帧动画，并使用 animation 简写属性将这些关键帧动画应用于我们想要动画的离开（::view-transition-old()）和进入（::view-transition-new()）页面中的元素。

css
/* 创建自定义动画 */
@keyframes move-out {
  from {
    transform: translateY(0%);
  }

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

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

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

/* 将自定义动画应用于新旧页面状态 */
::view-transition-old(root) {
  animation: 0.4s ease-in both move-out;
}

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

查看此过渡多页应用实时演示。

规范

Specification
CSS View Transitions Module Level 2
# view-transition-rule

浏览器兼容性

参见