单页面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 属性值相同，因此运动看起来是一个总体运动的效果。不然运动不一致，体验不佳。

滑出后