jquery.transit 在滚动期间没有动画答案

【问题标题】：jquery.transit does not animate during scrollingjquery.transit 在滚动期间没有动画
【发布时间】：2013-09-17 17:20:29
【问题描述】：

我正在使用 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 激活动画，有没有人有类似的经历？

【问题讨论】：

是的，在带有 IOS5 的 Iphone 上也看到了同样的情况。真烦人。您找到解决方案了吗？
不幸的是还没有。然而，我确实注意到，在 .animate() 使用 jquery 的本机时，这更加直言不讳。使用 animate 时，您可以通过滚动中途停止动画，一旦滚动事件完成，它们将不会继续，其中transit 会暂停动画，但在滚动停止后继续。

标签： javascript jquery cordova css-transitions

【解决方案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>

【讨论】：