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

html-css07

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

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

演示实例如下图所示:

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

这个css是实现不了的,你可以通过js或者jq来判断,屏幕滚动到某一点上的时候,给对应的元素加上动画类。

或者你还可以选着用现成的jQ插件来实现,页面滚到某一位置时,就会出现相应的动画,推荐你去百度搜一下 wow.js或则 aos.js