您可能常常會想要在應用程式中,讓使用者於檢視之間移動 -- 無論是前往詳細資料檢視的清單,或是顯示側邊欄導覽。 檢視之間的動畫處理能讓使用者不至於分心,並為專案增添更多的活力。
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);
}
您可以加以擴展,以涵蓋多個檢視,基本概念應該是一樣的;每個非可見檢視應該在畫面之外,並在必要時帶回,而目前的畫面上檢視應該要移開。
除了在檢視之間轉換,這項技巧也可套用於其他滑入元素中,例如側邊欄導覽元素。 唯一真正的區別是您應該不需要移動其他檢視。
確保您的動畫可搭配較大螢幕運作
針對較大的螢幕,您應該隨時保持清單檢視 (而非移除它),並從右手邊滑入詳細資訊檢視。 大概就和處理導覽檢視相同。