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

2014/07/09 22:27:00

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

	(function(global, $, undefined) {
	'use strict';

	var doc = global.document;

	// まずイベント名を確定させる
	var TRANSITION_END = (function() {
	var events = {
	'transition': 'transitionend',
	'WebkitTransition': 'webkitTransitionEnd'
	};

	var evName, prop;
	for (prop in events) {
	if (typeof(doc.body.style[prop]) !== undefined) {
	evName = events[prop];
	break;
	}
	}

	return evName;
	}());

	// そして拡張
	$.extend($.fn, {
	/**
	* addClassして、そのtransitionEndでコールバック
	*
	* @param {String} className
	* addClassするクラス名
	* @param {Function} callback
	* transitionEndで発火したいコールバック
	*/
	addClassWithTransitionCallback: function(className, callback) {
	if (!className) { return this; }

	if (!callback \|\| !$.isFunction(callback)) {
	return this.addClass(className);
	}

	return this
	.one(TRANSITION_END, function(ev) {
	callback.call(this, ev);
	})
	.addClass(className);
	},

	/**
	* removeClassして、そのtransitionEndでコールバック
	*
	* @param {String} className
	* removeClassするクラス名
	* @param {Function} callback
	* transitionEndで発火したいコールバック
	*/
	removeClassWithTransitionCallback: function(className, callback) {
	if (!className) { return this; }

	if (!callback \|\| !$.isFunction(callback)) {
	return this.removeClass(className);
	}

	return this
	.one(TRANSITION_END, function(ev) {
	callback.call(this, ev);
	})
	.removeClass(className);
	}
	});

	}(window, jQuery));

$('.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で良いです・・。