單頁面web應用的滑動

目的

印象筆記的web版是一個優秀的單頁面應用。但願經過分析 工做羣聊 這個滑入與滑出，探討單頁web應用開發的若干細節問題。

---

看第一行

滑出前

滑出後

分析一

只是給 div 增長了樣式 GLEVGR2BNUB。該樣式增長的屬性 width:459px !important;

看第二行

滑出前

滑出後

分析二

因爲父級增長樣式 GLEVGR2BNUB，因此 .GLEVGR2BNUB .GLEVGR2BJUB發揮做用。它增長屬性 left: 0px;

綜合分析

滑出前

// 父級
.GLEVGR2BGRB {
    background: none repeat scroll 0% 0% #FFF;
    position: absolute;
    top: 0px;
    left: 0px;
    width: 0px;
    transition: width 0.4s ease-in-out 0s;
    overflow: hidden;
    height: 100%;
    z-index: 100;
}
// 子級
.GLEVGR2BJUB {
    position: relative;
    transition: left 0.4s ease-in-out 0s;
    width: 456px;
    height: 100%;
    left: -459px;
    border-right: 3px solid rgba(236, 236, 236, 0.7);
}

觸發滑動，滑動過程

// 父級增長屬性
.GLEVGR2BNUB {
    width: 459px !important;
}

// 子級增長屬性
.GLEVGR2BNUB .GLEVGR2BJUB {
    left: 0px;
}

父級 width 變化，以 transition: width 0.4s ease-in-out 0s; 的方式運動。
子級 left 變化，以 transition: left 0.4s ease-in-out 0s; 的方式運動。
由於 transition-duration 屬性值相同，因此運動看起來是一個總體運動的效果。不然運動不一致，體驗不佳。

滑出後