Question

我在我的应用中使用twitter bootstrap。我需要每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秒）。但在那之后没有动画。当我使用断点进行调试时，它可以正常工作。我在这里做错了吗？

Answer 1

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

$(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的类没有改变（即它之前和之后会有相同的类），所以不会发生任何事情。

要解决这个问题，你需要让浏览器认为这些类实际上已经发生了变化。实现这一目标的一种方法是：

重置#change-color上的类和颜色。
手动控制回浏览器。
添加animate-color。
重新启动计时器。
手动控制回浏览器。

那么我们如何将控制权交还给浏览器呢？ 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/

对于延迟感到抱歉，我忘记了这个问题。

每20秒启动一次动画

1 个答案: