單頁(yè)面web應(yīng)用的滑動(dòng)

biaoxiaoduan 發(fā)布于2019-08-28 18:04 / 3120人閱讀

摘要：目的印象筆記的版是一個(gè)優(yōu)秀的單頁(yè)面應(yīng)用。希望通過(guò)分析工作群聊這個(gè)滑入與滑出，探討單頁(yè)應(yīng)用開(kāi)發(fā)的若干細(xì)節(jié)問(wèn)題。該樣式增加的屬性看第二行滑出前滑出后分析二由于父級(jí)增加樣式，所以發(fā)揮作用。子級(jí)變化，以的方式運(yùn)動(dòng)。否則運(yùn)動(dòng)不一致，體驗(yàn)不佳。

目的

印象筆記的web版是一個(gè)優(yōu)秀的單頁(yè)面應(yīng)用。希望通過(guò)分析 工作群聊 這個(gè)滑入與滑出，探討單頁(yè)web應(yīng)用開(kāi)發(fā)的若干細(xì)節(jié)問(wèn)題。

看第一行 滑出前

滑出后

分析一

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

看第二行 滑出前

滑出后

分析二

由于父級(jí)增加樣式 GLEVGR2BNUB，所以 .GLEVGR2BNUB .GLEVGR2BJUB發(fā)揮作用。它增加屬性 left: 0px;

綜合分析 滑出前

// 父級(jí)
.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;
}
// 子級(jí)
.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);
}

觸發(fā)滑動(dòng)，滑動(dòng)過(guò)程

// 父級(jí)增加屬性
.GLEVGR2BNUB {
    width: 459px !important;
}

// 子級(jí)增加屬性
.GLEVGR2BNUB .GLEVGR2BJUB {
    left: 0px;
}

父級(jí) width 變化，以 transition: width 0.4s ease-in-out 0s; 的方式運(yùn)動(dòng)。
子級(jí) left 變化，以 transition: left 0.4s ease-in-out 0s; 的方式運(yùn)動(dòng)。
因?yàn)?transition-duration 屬性值相同，所以運(yùn)動(dòng)看起來(lái)是一個(gè)整體運(yùn)動(dòng)的效果。否則運(yùn)動(dòng)不一致，體驗(yàn)不佳。

滑出后