« 2014年11月的文章归档

基于CSS3的WEBAPP横向滑动模式演化

前言

随着移动网络速率和设备硬件水平的不断提升,webapp的发展更加的native化,其表现效果和性能也会越来越好,在可预计的未来很有可能替代native或者平起平坐,那么我们研究更好的交互体验是非常有必要的。

目前我们所常见的webapp越来越多的是以SPA(single page application)的模式进行开发,同时嵌套在android或者ios本地壳里面,也就是hybrid应用,这种开发方式所带来的优势就不多讨论,本文研究的重点是在SPA模式中,页面间横向滑动切换场景时模式是怎样设计的。在这篇文章里,笔者将展示并阐述四种横向滑动模式的架构布局及CSS设计方案,供大家参考(多图请耐心加载)。

一、容器整体滑动(DEMO只演示A-B-C-B,下同)

模拟动画效果见下图(上),滑动分解见下图(下):

容器整体滑动

整体容器滑动

DEMO地址:http://nirvana.sinaapp.com/demo_slider/slider_1.html 

»阅读全部