疑似要素でアニメーションを行う

疑似要素をjQueryでアニメーションさせようとして少し詰まったのでメモしておきます。

うまくいかなかった場合

疑似要素にjQueryのanimate()を指定してみます。

HTML

<div class="sample"></div>
<button id="btn">表示</button>

CSS

.sample:before {
	content: '';
	display: block;
	width: 50px;
	height: 50px;
	background: #000000;
	opacity: 0;
}

JavaScript

$(function() {
	$('#btn').on('click', function() {
		$('.sample:before').animate({
			opacity: 1
		}, 500);
	});
});

これでいけるかと思ったのですが、疑似要素はDOM要素ではないので操作することができませんでした。
うまくいかなかった場合のデモページ
　

対応方法

CSSにアニメーションを用意して、JavaScriptではclassを付与するのみにして対応しました。

CSS

.sample:before {
	content: '';
	display: block;
	width: 50px;
	height: 50px;
	background: #000000;
	opacity: 0;
	-webkit-transition: opacity 500ms;
	transition: opacity 500ms;
}
.sample.is-show:before {
	opacity: 1;
}

JavaScript

$(function() {
	$('#btn').on('click', function() {
		$('.sample').addClass('is-show');
	});
});

疑似要素をアニメーションさせるデモページ1

CSSを変更できない場合、JavaScriptでstyle要素を追加する形でも対応できました。

JavaScript

$(function() {
	$('#btn').on('click', function() {
		$('head').append('<style>.sample:before {-webkit-transition: opacity 500ms;transition: opacity 500ms;opacity: 1;}</style>');
	});
});

疑似要素をアニメーションさせるデモページ2
　

【参考サイト】

• JS/jQueryでCSS疑似要素である:before:afterのプロパティを取得し変更する | ITハット