視圖過渡中的'類型”描述符到底是什麼？

>曾經研究過新的東西只是為了找到很少的信息嗎？這是探索未知的數字領域的令人沮喪而令人興奮的悖論。 最近，我在記錄 attrule及其@view-transition>描述符時遇到了這一點。 types>

>您可能熟悉跨文檔視圖過渡：網頁之間的CSS供電過渡，以前需要JavaScript框架和動畫庫。 啟動過渡涉及在兩個頁面上設置

>描述符，從而產生平滑的交叉效果。 navigation auto

簡單，對嗎？

@view-transition {
  navigation: auto;
}

是通常的描述符。但是還有另一個文獻記錄的兄弟姐妹：

> descriptor。 navigation理解types>描述符

跨文檔視圖過渡是相對較新的，因此正在進行全面的探索。 令人驚訝的是，描述符經常被忽略。一些文檔完全忽略了它。 CSS規範提供了以下澄清：types

types描述符在捕獲或執行過渡時設置過渡的活動類型。

更具體地說，

>接受活動類型名稱的空格分隔列表（as ）或types>如果沒有活動類型，

名稱：types <custom-ident></custom-ident>none

> for：
• types
• 值： | @view-transition
• 初始： none <custom-ident> </custom-ident>
• >示例用法： none但是什麼是“活動”類型？ 讓我們深入研究。

活動類型：裁縫過渡

@view-transition {
  navigation: auto;
  types: bounce;
}

/* Or a list */
@view-transition {
  navigation: auto;
  types: bounce fade rotate;
}

挑戰：

一個通用的交叉效率動畫很有用，但是通常我們需要基於導航上下文的過渡自定義。 例如，分頁的內容可能會向右/向左滑動，而社交媒體配置文件單擊可以在過渡過程中持續遵守配置文件圖像。 定義多個過渡直接導致衝突。 我們需要選擇性過渡激活。

解決方案：

活動類型確定哪些過渡執行以及哪些元素參與。 在CSS中，具有特定活性類型的 pseudo-class目標元素。 如果我們將定義為活動類型，則只有在滿足條件時才激活

動畫。

>

@view-transition {
  navigation: auto;
}

這可以防止衝突的過渡。 重要的是，這僅影響到頁面的過渡，而不是從中轉換，從而基於目標頁面實現自定義的過渡。 > >通過

>描述符控制的演示示例

和bounce在此處可用slide>。 完整的代碼位於github [link to-github]上。 types> JavaScript的增強角色 > CSS單獨將控制限制為基於目標頁面的過渡。 更複雜的場景，例如我們的分頁和社交媒體示例，都需要了解源頁面。 活動類型可以通過三種方式填充：

通過

>參數。

使用過渡的

屬性動態突變。

>
1. 使用startViewTransition(callbackOptions)>描述符聲明（如上所述）。
>
2. types>選項2，使用
>事件，允許按需活動類型設置，從而基於源和目標頁面啟用上下文感知的過渡。 有必要進一步探索該方法。
3. > types有關活動類型的更深入研究，請參見：

在跨文檔視圖過渡中查看過渡類型（bramus）

pagereveal使用JavaScript（Umar Hansa）自定義視圖過渡的方向

以上是視圖過渡中的'類型”描述符到底是什麼？的詳細內容。更多資訊請關注PHP中文網其他相關文章！