@view-transition

语法

@view-transition {
  navigation: auto;
}

描述符

navigation

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

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

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

形式语法

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

示例

页面视图过渡

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

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

@view-transition {
  navigation: auto;
}

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

/* 创建自定义动画 */
@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;
}

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

规范

浏览器兼容性

参见

• ::view-transition
• ::view-transition-new()
• ::view-transition-old()
• ::view-transition-group()
• ::view-transition-image-pair()
• 视图过渡 API
• CSS at 规则
• CSS at 规则函数