瞭解如何在應用程式中以動畫呈現兩個檢視畫面。
通常您會希望讓使用者切換應用程式的檢視畫面，例如從清單前往詳細資料檢視畫面，或顯示側欄導覽。在這些檢視畫面之間播放動畫可保持使用者的參與度，並為專案增添更多生命。
- 使用平移在檢視畫面之間移動；避免使用
left、top或任何其他會觸發版面配置的屬性。 - 確保使用的所有動畫都能流暢播放，且時間長度保持短。
- 請考量動畫和版面配置的變化，隨著螢幕尺寸的增加而改變；適合小螢幕的做法在電腦版上可能有些奇怪。
檢視畫面轉場效果和運作方式，取決於您處理的檢視畫面類型。舉例來說，在檢視畫面上為強制回應重疊元素建立動畫效果，就跟在清單檢視和詳細資料檢視畫面之間切換時一樣。
使用翻譯功能切換檢視畫面
為了方便起見，假設有兩個檢視畫面：清單檢視和詳細資料檢視。當使用者輕觸清單檢視畫面中的清單項目時，詳細資料檢視畫面會滑入，清單檢視則會滑出。
為達成此效果，兩個檢視畫面都需要有 overflow: hidden 的容器。這樣一來，這兩個檢視畫面都可以並排在容器中並排，而且不會顯示任何水平捲軸，而且每個檢視畫面都能視需要在容器內左右滑動。
容器的 CSS 如下：
.container {
width: 100%;
height: 100%;
overflow: hidden;
position: relative;
}
容器的位置設為 relative。這表示內部的每個檢視畫面都可以絕對放置在左上角，然後隨著轉換進行移動。這種做法比使用 left 屬性更出色，因為會觸發版面配置和繪製作業，而且通常較容易合理化。
.view {
width: 100%;
height: 100%;
position: absolute;
left: 0;
top: 0;
/* let the browser know we plan to animate
each view in and out */
will-change: transform;
}
在 transform 屬性中加入 transition，即可產生效果絕佳的投影片效果。為了營造良好的氛圍，它會使用自訂的 cubic-bezier 曲線，如自訂加/減速指南所述。
.view {
transition: transform 0.3s cubic-bezier(0.465, 0.183, 0.153, 0.946);
}
畫面外的檢視畫面應轉譯為右側，因此在這種情況下，必須移動詳細資料檢視畫面：
.details-view {
transform: translateX(100%);
}
現在需要少量的 JavaScript 來處理類別。這會在檢視畫面中切換適當的類別。
var container = document.querySelector('.container');
var backButton = document.querySelector('.back-button');
var listItems = document.querySelectorAll('.list-item');
/**
* Toggles the class on the container so that
* we choose the correct view.
*/
function onViewChange(evt) {
container.classList.toggle('view-change');
}
// When you click a list item, bring on the details view.
for (var i = 0; i < listItems.length; i++) {
listItems[i].addEventListener('click', onViewChange, false);
}
// And switch it back again when you click the back button
backButton.addEventListener('click', onViewChange);
最後，我們為這些類別加入 CSS 宣告。
.view-change .list-view {
transform: translateX(-100%);
}
.view-change .details-view {
transform: translateX(0);
}
您可以擴大此功能涵蓋多個檢視畫面，而基本概念應保持不變；每個不可見的檢視畫面都應在畫面外開啟，並視需要移開目前的畫面。
除了在檢視畫面之間切換，這項技巧也可以套用至其他滑入式元素，例如側欄導覽元素。唯一的差別在於，您不需要移動其他檢視畫面。
確認動畫可在大型螢幕上運作
如果螢幕較大，請一律保留清單檢視畫面，而非移除，並將右側詳細資料檢視畫面滑動。做法與處理導覽檢視幾乎相同。