ページ上の単語の配列を繰り返すCoffeescript？

Question

私は既存の言葉が出て回転させ、そして新しい単語がで回転しながら、私はページ上の反復処理したい単語の配列を持っている。

を私はアニメーションを処理するためにanimate.cssを使用しています追加と削除を経由してクラス。

最初のdivには入室クラス.rotateInがあり、ページのレンダリング時にアニメーションが適用されます。それには.animatedクラスもあります。アニメーションをトリガーするためにはこのクラスが存在しなければなりません。

遅延アニメーションクラス.rotateOutを追加してから、エントランスクラスを削除して終了アニメーションをトリガーします。この時点で、divは非表示になります。

私はテキストを変更してからエントランスクラスを追加し、終了クラスを削除して入り口アニメーションをトリガします。

配列の最後の単語にヒットしたら、関数は停止します。

私は入り口と出口の間のタイミングを調整できるように、これを書状で書くにはどうすればよいですか？

編集：ここには、私が何をしようとしているかを示すいくつかの基本的なJavaScriptコードがあります。私はこれを書き直して、下の脆弱なPITAではなく、['foo', 'bar']という単語の配列を設定できるようにしたいと思います。

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);