@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 |
瀏覽器相容性
載入中…