[譯]視圖切換動畫教程

原文出處： https://developers.google.com/web/fundamentals/look-and-feel/animation...

咱們常常須要將用戶切換到不一樣視圖，切換中的動畫可讓用戶有更好的體驗。

重點：

• 使用translation實現視圖間移動，避免使用left,top這樣的任何會觸發佈局的屬性完成動畫。
• 確保動畫短且時髦（snappy）
• 考慮屏幕尺寸變大時的動畫和佈局，適合小屏幕的動畫不必定適合大屏幕

動畫的選擇要改由視圖切換類型來決定，例如模態對話框出現的動畫和列表到詳情的動畫就有區別。

注意：

• 須要保證動畫頻率爲60fps以免卡頓
• 使用will-change屬性讓瀏覽器優化動畫，視圖動畫中咱們推薦will-change: transform

視圖切換時使用translation

這裏咱們實現列表視圖到詳情視圖的切換，用戶點擊列表項時詳情滑動出現，替換掉列表頁。

要實現這個效果你須要一個包含兩個視圖的容器，容器設置overflwo:hidden，這樣就能保證兩個視圖並排也不出現水平滾動條。

容器對應的CSS以下：

.container {
  width: 100%;
  height: 100%;
  overflow: hidden;
  position: relative;
}

容器設置position: relative是爲了視圖能夠方便地絕對定位，而後使用transform進行移動。使用transform性能比left屬性好，由於left會觸發佈局和重繪。

視圖樣式以下：

.view {
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;

  will-change: transform;
}

爲視圖transform添加transition可以產生很好的滑動效果，咱們使用cubic-bezier曲線來完成。

.view {
  transition: transform 0.3s cubic-bezier(0.465, 0.183, 0.153, 0.946);
}

須要隱藏的視圖應該translate到右邊：

.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 on a list item bring on the details view
 **/
for (var i = 0, len = listItems.length; i < len; ++i) {
  listItems[i].addEventListener('click', onViewChange, false);
}

backButton.addEventListener('click', onViewChange, false);

最後添加必要的CSS

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

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

你能夠擴展這個例子到多視圖模式，基本理念依然不變：不可見的視圖須要隱藏在屏幕外面，而後在須要的時候顯示出來，而且把當前視圖移除。

這裏是完整的在線demo

<iframe width="100%" height="300" src="//jsfiddle.net/gwcnx505/embedded/result,css,js,html" allowfullscreen="allowfullscreen" frameborder="0"></iframe>

注意：

跨瀏覽器實現這個效果是頗有挑戰性的，好比在iOS中須要添加-webkit-overflwo-scrolling: touch來‘reenable’ fling scrolling，可是你不須要控制具體的axis。

以上的方法可使用到其餘滑動元素，例如側邊導航。惟一的區別在於你不須要移動其餘視圖。