Question

I’ve got an array of words I want to iterate through on a page, making the existing word rotate out, and a new word rotate in.

I’m using animate.css to handle the animations via adding and removing a class.

The initial div has an entrance class .rotateIn on it, and so animates on page render. It also has a .animated class on it, which must be present in order for the animation to be triggered.

After a two second delay, I add the exit animation class .rotateOut, then remove the entrance class, which then triggers the exit animation. At this point, the div is hidden.

I change the text, then add the entrance class, then remove the exit class, triggering the entrance animation.

Once I hit the last word in the array, the function stops.

What’s the best way to write this in coffeescript so that I can tweak the timings between entrance and exit?

EDIT: here’s some basic javascript code showing what I’m trying to do. I’d like to rewrite this so that I can set an array of words ['foo', 'bar'] rather than the fragile PITA way below.

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

Rather than setting a timeout each time, you should try using an interval that fires the same callback until you’ve reached the end. Take a look at this example, then add in your extra bits for animating.

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

Just for clarity’s sake, here is the compiled 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);