1

我在我的应用程序中使用 twitter 引导程序。我需要每 20 秒为一个图标设置动画。

这是我的代码。它在咖啡脚本中。但它非常基础，很容易与 javascript 相关联。

@updateCountIndicator = () ->
  data = Math.floor (Math.random() * 10) + 1
  countIndicator = $("#count-indicator")
  countIcon = $("#count-icon")
  countIcon.removeClass("icon-animated-vertical")
  countIndicator.html data
  countIcon.toggleClass "icon-animated-vertical"
  timedCountUpdate()

@timedCountUpdate = () ->
  setTimeout(updateCountIndicator, 20000)

问题是，图标第一次动画（页面刷新后 20 秒）。但之后就没有动画了。当我使用断点调试时它可以正常工作。我在这里做错了吗？

4

1 回答 1

3

我想我（终于）看到了问题所在。我们会看看你的小提琴：

$(document).ready(function(){
    setTimeout(animateIcon, 20000);
});

function animateIcon() {
    $("#change-color").addClass("animate-color");
    setTimeout(animateIcon, 20000);
}

然后从那里去。每次animateIcon调用时，都会：

$("#change-color").addClass("animate-color");

但是，如果#change-color已经有这个animate-color类，那什么也做不了，所以你只能看到animate-color一次动画。这将导致我们尝试这个 CoffeeScript 版本：

animateIcon = ->
    $('#change-color').removeClass('animate-color')
    $('#change-color').addClass('animate-color')
    setTimeout(animateIcon, 20000)
$(animateIcon)

看起来它应该重新添加animate-color类并重新触发 CSS 动画，但它不会。为什么不？好吧，第二次animateIcon运行，#change-color将animate-color在函数的开头，当浏览器再次获得控制权时，它将animate-color在结束时；因为#change-color's 的类没有改变（即它之前和之后将具有相同的类），所以什么都不会发生。

为了解决这个问题，你需要让浏览器认为类实际上已经改变了。实现这一点的一种方法是这样的：

  1. 重置 上的类和颜色#change-color。
  2. 将控制权交还给浏览器。
  3. 添加animate-color.
  4. 重新启动计时器。
  5. 将控制权交还给浏览器。

那么我们如何将控制权交还给浏览器呢？一个setTimeout(..., 0)电话是一个常见的技巧。将上面的内容转换为 CoffeeScript 会给我们：

addClassAndRestart = ->
    $('#change-color').addClass('animate-color')
    setTimeout(animateIcon, 20000)
animateIcon = ->
    $('#change-color').removeClass('animate-color').css('background', 'transparent')
    setTimeout(addClassAndRestart, 0)
$(animateIcon)

可能需要也可能不需要，.css('background', 'transparent')但这就是#change-color开始的，所以我添加了它。

演示：http: //jsfiddle.net/ambiguous/BByJD/

抱歉耽搁了，我忘记了这个问题。

于 2013-08-24T02:59:58.327 回答