The #ChromeDevSummit site is live, happening Nov 12-13 in San Francisco, CA
Check it out for details and request an invite. We'll be diving deep into modern web tech & looking ahead to the platform's future.

檢視之間的動畫處理

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

TL;DR

  • 使用轉換,以在檢視之間移動;避免使用 lefttop 或觸發版面配置的任何其他屬性。
  • 確保您使用的任何動畫不但要潮,而且控制持續時間要短。
  • 同時要考慮螢幕變大時的動畫和版面配置變化;較小螢幕上可行的內容,在桌面環境上可能看起來很突兀。

這些檢視轉換的外觀和行為重度取決於您正在處理的檢視類型,因此在檢視上層動畫處理強制回應重疊,較之於在清單和詳細資訊檢視之間轉換,應該是個不同的經驗。

使用轉換以在檢視之間移動

要讓過程更容易些,讓我們假設有兩個檢視: 一個清單檢視和一個詳細資訊檢視。 當使用者在清單檢視內點選一個清單項目,詳細資訊檢視將滑入,而清單檢視將滑出。

在兩個檢視之間轉換

要達到這個效果,您需要針對兩種檢視使用容器,並將之設定 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);
}

請參閱範例。

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

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

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

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

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