單頁面web應用的滑動

biaoxiaoduan 發布于2019-08-28 18:04 / 3128人閱讀

摘要：目的印象筆記的版是一個優秀的單頁面應用。希望通過分析工作群聊這個滑入與滑出，探討單頁應用開發的若干細節問題。該樣式增加的屬性看第二行滑出前滑出后分析二由于父級增加樣式，所以發揮作用。子級變化，以的方式運動。否則運動不一致，體驗不佳。

目的

印象筆記的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 屬性值相同，所以運動看起來是一個整體運動的效果。否則運動不一致，體驗不佳。

滑出后

云服務器 GPU云服務器單頁面應用滑動頁面頁面滑動 web的應用

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/110992.html

移動web開發問題和優化小結

摘要：如何讓我們所開發的手機頁面能有更好的交互體驗，就是這篇文章的主旨移動開發問題和優化小結。關于和鼠標事件的延遲說明，我引用葉小釵大神博客里面的一張圖片，如下在手機上，的延遲將近。 1.前言到目前為止，互聯網行業里，手機越來越智能化，移動端占有的比例越來越高，尤其實在電商，新聞，廣告，游戲領域。用戶要求越來越高，網站功能越來越好，效果越來越炫酷，這就要求我們產品質量越來越高，web前端開...

galaxy_robot 2019-08-01 17:40 評論0 收藏0
移動web開發問題和優化小結

摘要：如何讓我們所開發的手機頁面能有更好的交互體驗，就是這篇文章的主旨移動開發問題和優化小結。關于和鼠標事件的延遲說明，我引用葉小釵大神博客里面的一張圖片，如下在手機上，的延遲將近。 1.前言到目前為止，互聯網行業里，手機越來越智能化，移動端占有的比例越來越高，尤其實在電商，新聞，廣告，游戲領域。用戶要求越來越高，網站功能越來越好，效果越來越炫酷，這就要求我們產品質量越來越高，web前端開...

ysl_unh 2019-08-21 16:44 評論0 收藏0
html初體驗#2

摘要：但在后端代碼中容易識別成注釋，慎用忘記加分號啦執行為協議，這里意思為不執行任何命令忘記加分號啦執行為協議，這里意思為不執行任何命令標簽也用于跳轉頁面，但必須有按鈕或者點擊才能跳轉完整樣式網址同標簽提交必須寫屬性才能被提交。碎碎念關于布局 css布局：橫向、縱向 2019年新進展：css grid git bash 上安裝 http server 目的在于不使用 file:/...

Cobub 2019-08-30 14:10 評論0 收藏0
html初體驗#2

摘要：但在后端代碼中容易識別成注釋，慎用忘記加分號啦執行為協議，這里意思為不執行任何命令忘記加分號啦執行為協議，這里意思為不執行任何命令標簽也用于跳轉頁面，但必須有按鈕或者點擊才能跳轉完整樣式網址同標簽提交必須寫屬性才能被提交。碎碎念關于布局 css布局：橫向、縱向 2019年新進展：css grid git bash 上安裝 http server 目的在于不使用 file:/...

xiangzhihong 2019-08-01 18:42 評論0 收藏0