anime.jsで変化させた要素をアニメーション終了後に戻す

anime.jsを使ってアニメーションを表示させるとtranslateやrotateの値が変化したままでそのあと続けてアニメーションを表示させるとおかしな挙動になる。そこでcallback関数を用いて以下のようにアニメーション終了後に値を戻せばその後のアニメーションも正しい挙動になる。

var target = document.getElementById("target");
anime({
    targets: target,
    translateX: 100,
    duration: 200,
    complete: function(anim){ //callback関数
        anime.set(target, {
            translateX:0
        });
    }
});

ループ内での場合

しかし、forループやwhileループで以下のようにすると想定通りには動かない。

for(target of targets){
    anime({
        targets: target,
        translateX: 100,
        duration: 200,
        complete: function(anim){
            anime.set(target, {
                translateX:0
            })
        }
    });
}

これはcallback関数がforループの終了後に行われていてtargetsリストの一番最後の要素だけにしかcallback関数が適用されないからである。
そこで以下のようanimeオブジェクトからtargetを直接とるとうまくいく。

for(target of targets){
    anime({
        targets: target,
        translateX: 100,
        duration: 200,
        complete: function(anim){
            anime.set(anim.animatables[0].target, {
                translateX:0
            })
        }
    });
}

callback関数は第一引数にanimeオブジェクトをとれるので使用し（thisでも可能）anim.animatables[0].targetでアニメーションオブジェクトからtargetをとってこれる。
anime.jsのanimeオブジェクトはtarget以外にも終了時のイベントやアニメーション進行度合いなどさまざまな要素を含んでいるのでうまく利用するとアニメーションを工夫できる。