更平滑的滑动/手势CSS过渡动画

时间:2013-07-01 19:43:24

标签: html5 css3 animation css-transitions

我目前正在创建一个小而简单的网络应用,用户可以在其中创建几个问题,然后他们可以获得一个答案,显示他们的问题列表。

通过滑动项目(使用hammer.js),项目向左转65px,显示垃圾图标,允许他们删除问题,类似于您可以滑动以删除iOS上的列表项。

然而,当滑动时,如果用户有几个问题可以向下滚动页面主体,当向左滑动以删除问题时,页面有时也会倾向于垂直滚动,这个垂直页面滚动与显示垃圾图标的CSS动画会导致动画在页面滚动时停止,然后动画跳转到位,使其看起来很草率。

我知道我可以使用preventDefault参数但是如果用户通过触摸任何列表项目来滚动页面,这会阻止页面正文滚动,这些列表项目覆盖了屏幕的大部分,因此这不起作用。

有没有人知道如何整理这一点,以便用户可以滑动以删除项目并查看漂亮流畅的动画,同时还可以在需要时滚动页面,如在iOS中。

该应用可以是played with here to see the effect

只需创建几个问题,以便页面可以滚动,然后转到回答问题,以便您可以滑动以删除问题。

感谢您的帮助, 马丁

0 个答案:

没有答案
相关问题