Question

我正在使用phonegap制作一个iPad应用程序，在这方面，我喜欢jquery.transit，这很容易帮助我制作css3动画。

然而，我遇到了一个障碍。我正在创建一个在线列表，在登录时添加新用户。在滚动页面时添加DOM元素没有问题，但是，当添加css3动画以“展开”元素时，动画仅在不滚动时才有效。结果高度为0的元素;不会产生所需的高度：56px;在它上面运行动画时。

---编辑---

看起来这个问题与其他div中的滚动有关，而不是运行动画的div。如果我滚动包含friendList（使用overflow auto固定）的div，它在滚动时工作正常。当滚动实际页面并且iOS原生滚动开始时，这只是一个问题。

---编辑---

代码如下：

<ul class="friendList">
  <li class="friendElement">
     <div class="friendWrapper">
     (content here)
     </div>
  </li>
</ul>

，其中

.friendWrapper.entering{
   height:0;
}

和朋友登录：

var $friendTemplate = (... appropriate template goes here ...);

function friendLogsOn(){
   var $newFriend = $friendTemplate.clone(),
   $friendList = $(".friendList"),
   nmbElements = $friendList.children().length,
   rand = Math.floor(Math.random()*nmbElements);
   $newFriend.find(".friendWrapper").addClass("entering");
   $newFriend.insertAfter($friendList.children().eq(rand));
   $newFriend.find(".friendWrapper").transition({ height: '56px' },function(){
      $(this).removeClass("entering");
   });
}

在用户滚动时，我无法使jquery.transition激活动画，是否有人有类似的体验？

Answer 1

在进行常规页面滚动时无法进行动画处理，因为iOS会在滚动开始时呈现整个页面。

这样做是为了提高性能。其他智能手机和桌子也做同样的事情。

您可以使用像iScroll4这样的插件来实现结果。 iScroll不会定期滚动，而是侦听鼠标/触摸事件，然后移动元素以模拟滚动。 http://cubiq.org/iscroll-4

如果你想测试动画是否在滚动时停止我已经做了一个简单的jsfiddle你可以试试。（在iPad，iPhone，Android设备等） http://jsfiddle.net/3ntKM/4/embedded/result/

<style>
    #square {
        width: 200px;
        height: 200px;
        margin: auto;
        background: red;
        -webkit-animation: rotate 4s infinite linear;
    }
    @-webkit-keyframes rotate {
        from { -webkit-transform: rotate(0deg); }
        to { -webkit-transform: rotate(360deg); }
    }
</style>
<div id="square"></div>

在滚动期间，jquery.transit不会设置动画

1 个答案: