讓內容和進場轉換產生動畫效果 (HTML)

[ 本文的目標對象是撰寫 Windows 執行階段 App 的 Windows 8.x 和 Windows Phone 8.x 開發人員。如果您正在開發適用於 Windows 10 的 App,請參閱 最新文件 ]

使用內容轉換動畫來變更畫面中區域的內容,而容器或背景維持不變。進入畫面的新內容會從淡入的位移處滑入。如果有任何要取代的現有內容,則舊內容會在新內容進入時淡出。您可能會在分割畫面瀏覽中使用它,其中會對使用者顯示清單和詳細資料檢視。當應用程式在頁面之間轉換時,內容轉換動畫也會在頁面的其餘部分載入之後,將內容帶入檢視中。

這組動畫包含下列功能:

下列視訊示範先移除現有內容再將新內容帶入檢視的動畫:

請注意,原始內容和取代內容不需要具備相同的配置或大小。

若要使用內容轉換 API,您必須知道:

  • 傳出物件
  • 傳入物件
  • 傳入內容進入時將滑動的距離與方向。

其他資源

如需示範使用內容轉換動畫功能的程式碼範例,請參閱 HTML 動畫庫範例

如需使用這些動畫設計的最佳做法,請參閱內容轉換動畫的指導方針和檢查清單

相關主題

讓 UI 產生動畫效果

讓頁面轉換產生動畫效果

enterContent

exitContent