🧊

$.fn.fadeIn(fn)をCSSアニメでやる

最初は便利かなーと思ったのですが、使い勝手はイマイチでした・・。
まあ一応書いたので、メモっとこうと。

コード


jQuery add/removeClass with transition and callbac ...

これを使うと

$('.elm').fadeIn(function() {
  // do something...
});

ってのが、

.elm {
  opacity: 0;
  transition: opacity 1s ease;
}

.elm.is-animated {
  opacity: 1;
}

ってのを用意すれば、

$('.elm').addClassWithTransitionCallback('is-animated', function() {
  // do something...
});

ってできます。

いちおう嬉しいところ

やっぱりfor文でがんばるアニメーションは、Androidとか低スペック端末で若干辛いです。
それをまあ出来る限り救おうというのが趣旨です。

とはいえ、transitionEndのイベントの挙動がそもそも怪しかったり、コードが冗長になったりするので、一概に良いとも言えず。

結論

いや、jQueryで良いです・・。