0

我正在使用 phonegap 制作一个 iPad 应用程序，在这方面我喜欢jquery.transit，它可以轻松地帮助我制作 css3 动画。

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

- - 编辑 - -

看来这个问题与在其他 div 中滚动而不是运行动画有关。如果我滚动包含friendList（通过溢出自动修复）的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 激活动画，有没有人有类似的经历？

4

1 回答 1

0

在进行常规页面滚动时无法设置动画，因为 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>
于 2013-09-17T09:20:29.480 回答