CSSのtransitionアニメーションが終わったら関数を実行

結論

let time = $(el).css("transition-duration");

if(/ms$/.test(time)){ // msかどうか
  time = parseFloat(time);
} else {
  time = parseFloat(time) * 1000;
} 


setTimeout(()=>{
  // Do something...
}, time);

解説

CSSのtransitionを用いたアニメーションで、animateのコールバック関数みたいにするにはどうするか考えてみました。

要はアニメーションにかかる秒数をsetTimeoutしたらいいのです。

transitionのアニメーションにかかる秒数はCSSのtransition-durationプロパティを取るとわかります。

CSSのtime型のデータには秒とミリ秒が指定できるので、正規表現でミリ秒かどうかを判断して、ミリ秒の場合は1000かけます。

最後に、それをsetTimeoutしたら終わりです。

デモ

JSFiddle