@view-transition
@view-transition CSS @规则用于在跨文档导航时，使当前文档和目标文档进行视图过渡。
要使跨文档视图过渡生效，导航的当前文档和目标文档也必须在同一源上。
语法
css
@view-transition {
navigation: auto;
}
描述符
-
指定此 @规则对文档视图过渡行为的影响。可能的值有：
-
auto：在参与导航时，文档将进行视图过渡，前提是导航是同源的，没有跨源重定向，并且其navigationType是traverse、push或replace。在push或replace的情况下，导航必须由用户与页面内容交互发起，而不是由浏览器UI功能发起。 -
none：文档将不进行视图过渡。
-
正式语法
@view-transition =
@view-transition { <declaration-list> }
示例
过渡页面视图
以下代码片段展示了页面过渡演示中使用的关键概念。该演示使用了跨文档视图过渡；在网站的两个页面之间导航时会发生半秒的过渡。有关完整演示，请参见视图过渡多页面应用演示。
@view-transition @规则在当前文档和目标文档的 CSS 中指定，以使它们都参与视图过渡。
css
@view-transition {
navigation: auto;
}
除了@view-transition @规则，我们还使用@keyframes @规则来定义两个关键帧动画，并使用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 |
浏览器兼容性
加载中…