📦

.animateに同じclass名の要素を複数渡したい!

2022/04/15に公開

JavaScriptで.animateに同classを複数要素渡すことがあったので備忘録。

resultclassを持つ要素を全て取得して、それらにアニメーションをさせたい場合...

ダメな例
var resultItems = document.querySelectorAll(".result");
resultItems.animate(
	{
		opacity: [
			"1",
			"0.2",
			"1",
		]
	},
	{
		duration: 500
	}
);

と、そのままやりたくなるのですが、これでは動きません💦
querySelectorAllが配列で取得して渡されるのでforEachを使って配列の要素それぞれに.animateさせる処理にします。

動く例
var resultItems = document.querySelectorAll(".result");
resultItems.forEach(function (item) {
	item.animate(
		{
			opacity: [
                            "1",
                            "0.2",
                            "1",
                        ]
                 },
                 {
                        duration: 500
                 }
	)
});

Discussion