@view-transition

实验性： 这是一项 实验性技术
在生产环境中使用之前，请仔细检查 浏览器兼容性表。

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

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

语法

css
@view-transition {
  navigation: auto;
}

描述符

指定此 at-rule 对文档视图过渡行为的影响。可能的值为

  • auto：文档将在参与导航时进行视图过渡，前提是导航是相同来源，没有跨来源重定向，并且其 navigationType 为 traverse、push 或 replace。在 push 或 replace 的情况下，导航必须由用户与页面内容交互启动，而不是由浏览器 UI 功能启动。
  • none：文档不会进行视图过渡。

正式语法

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

示例

过渡页面视图

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

@view-transition at-rule 在您当前和目标导航文档的 CSS 中指定，以便它们都选择加入视图过渡

css
@view-transition {
  navigation: auto;
}

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

css
/* 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;
}

查看这个 多页面应用的过渡效果 演示。

规范

规范
CSS 视图过渡模块级别 2
# view-transition-rule

浏览器兼容性

BCD 表格只在浏览器中加载

另请参阅