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

疑似要素を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
 

【参考サイト】

 

このエントリーをはてなブックマークに追加

関連記事

コメントを残す

メールアドレスが公開されることはありません。
* が付いている欄は必須項目です

CAPTCHA


コメントが承認されるまで時間がかかります。

2024年3月
 12
3456789
10111213141516
17181920212223
24252627282930
31