APP前端请求后台时,“展开与收起”交互中渐进使用动画

      移动端开发过程中,前端在请求后台的数据时,为了用户体验更加完善,通常需要分页请求,在点击展开时以往我常常喜欢直接将数据全部加载,给用户的体验以及页面效果非常不好,点击收起时也是如此,为了提升用户体验以及页面美观,我们可以采用css3中的transition在交互中使用渐进动画。demo如下:

css样式:

html页面如下:

js:

演示实例如下图所示:

在具体的项目运用过程中只需要给id为more的div一个高度,具体高度根据页面情况而定,当然有很多不同的方式来达到交互效果,对css动画不是很了解,采用了一种最简单的方式,欢迎各位大神指教。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 176,094评论 25 709
  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 14,693评论 1 92
  • 习惯如空气般稀薄,却溢满指尖儿,直至被时间带走,留下回忆的影子。 影子如风,风中有你。
    从卉阅读 1,243评论 0 0
  • 对于冯唐的书,我并没有读过多少。有些诸如《不二》一类的书,在国内想读到,恐怕也是很有困难的事情,至少我是没有找到。...
    王根云阅读 1,747评论 0 0
  • 没有看过原著,电影版看了一半,就忍不住伦理的冲击弃剧了。在当下烂剧横行的年代,一年不看两部国产剧的我,苛刻...
    谢氏春秋阅读 2,241评论 0 0

友情链接更多精彩内容