檢視之間的動畫處理

By Paul Lewis

Paul is a Design and Perf Advocate

您可能常常會想要在應用程式中，讓使用者於檢視之間移動 -- 無論是前往詳細資料檢視的清單，或是顯示側邊欄導覽。檢視之間的動畫處理能讓使用者不至於分心，並為專案增添更多的活力。

TL;DR

使用轉換，以在檢視之間移動；避免使用 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 {
  /* Prefixes are needed for Safari and other WebKit-based browsers */
  transition: -webkit-transform 0.3s cubic-bezier(0.465, 0.183, 0.153, 0.946);
  transition: transform 0.3s cubic-bezier(0.465, 0.183, 0.153, 0.946);
}

畫面之外的檢視應該解譯為往右，因此在此例中，詳細資訊檢視應該要移動：

.details-view {
  -webkit-transform: translateX(100%);
  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 on 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 on the back button
backButton.addEventListener('click', onViewChange);

最後，我們為這些類別新增 CSS 宣告。

.view-change .list-view {
  -webkit-transform: translateX(-100%);
  transform: translateX(-100%);
}

.view-change .details-view {
  -webkit-transform: translateX(0);
  transform: translateX(0);
}

請參閱範例。

您可以加以擴展，以涵蓋多個檢視，基本概念應該是一樣的；每個非可見檢視應該在畫面之外，並在必要時帶回，而目前的畫面上檢視應該要移開。

除了在檢視之間轉換，這項技巧也可套用於其他滑入元素中，例如側邊欄導覽元素。唯一真正的區別是您應該不需要移動其他檢視。

確保您的動畫可搭配較大螢幕運作

針對較大的螢幕，您應該隨時保持清單檢視 (而非移除它)，並從右手邊滑入詳細資訊檢視。大概就和處理導覽檢視相同。

在較大螢幕上的視圖層次。