单页面web应用的滑动

biaoxiaoduan 发布于2019-08-28 18:04 / 3118人阅读

摘要：目的印象笔记的版是一个优秀的单页面应用。希望通过分析工作群聊这个滑入与滑出，探讨单页应用开发的若干细节问题。该样式增加的属性看第二行滑出前滑出后分析二由于父级增加样式，所以发挥作用。子级变化，以的方式运动。否则运动不一致，体验不佳。

目的

印象笔记的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的应用

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/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