Question

我想要在页面上迭代一系列单词，使现有单词旋转，然后旋转一个新单词。

我正在使用animate.css通过添加和删除类来处理动画。

初始div上有一个入口类.rotateIn，因此在页面渲染上进行动画处理。它上面还有一个.animated类，必须存在才能触发动画。

在延迟两秒后，我添加退出动画类.rotateOut，然后删除入口类，然后触发退出动画。此时，div被隐藏了。

我更改文本，然后添加入口类，然后删除出口类，触发入口动画。

一旦我点击了数组中的最后一个单词，该函数就会停止。

在coffeescript中写这个的最佳方法是什么，以便我可以调整入口和出口之间的时间？

编辑：这里有一些基本的javascript代码，显示了我正在尝试做的事情。我想重写这个，以便我可以设置一个单词['foo', 'bar']而不是下面脆弱的PITA方式。

var $adj = $('#adjectives');

setTimeout(function() {
$adj.addClass('rotateOut');
setTimeout(function() {
    $adj.removeClass('rotateIn');
    setTimeout(function() {
        $adj.text('foo');
        $adj.addClass('rotateIn');
        setTimeout(function() {
            $adj.removeClass('rotateOut');
            setTimeout(function() {
                $adj.addClass('rotateOut');
                setTimeout(function() {
                    $adj.removeClass('rotateIn');
                    setTimeout(function() {
                        $adj.text('bar');
                        $adj.addClass('rotateIn');
                    }, 1000);
                }, 1000);
            }, 1000);
        }, 1000);
    }, 1000);
}, 1000);
}, 1000);

Answer 1

不是每次都设置超时，而是应该尝试使用触发相同回调的间隔，直到结束。看一下这个例子，然后添加你的额外位来制作动画。

words = ["hey", "just", "testing", "this", "out"]
i = 0
len = words.length

callback = ->
    clearInterval timer if i is len - 1
    console.log words[i]
    i++
    return

timer = setInterval callback, 1000

为了清楚起见，这里是编译的JS

(function() {
  var callback, i, len, timer, words;
  words = ["hey", "just", "testing", "this", "out"];
  i = 0;
  len = words.length;

  callback = function() {
    if (i === len - 1) clearInterval(timer);
    console.log(words[i]);
    i++;
  };

  timer = setInterval(callback, 1000);
}).call(this);

Coffeescript迭代页面上的一系列单词？

1 个答案: