スキップしてメイン コンテンツに移動

CSSのtransition/animationに連動できるJavaScriptのtransitionend/animationend

JavaScriptのイベントのtransitionendとanimationendはそれぞれにCSSのtransitionとanimationの終了を検出する。なので後者を使うときに前者も一緒に使うとサイトで連動する動作を簡単に実現するプログラムが組める。

噛み合う金属の歯車

一般的にメニューをスライドしたり、ボタンをフェードしたりするなどのコンテンツのアニメーションを介した表示と非表示の切り替えに役立つ。

transitionendイベントでtransitionを捕捉する

何かをCSSのtransitionで動かしたら当のHTML要素をJavaScriptのaddEventListener()メソッドのtransitionendで補足して連動して別の状態に持って行くのが簡単な使い方だ。

transformとaddEventListenerによる連続動作のサンプル

🐮

牛が右端から左端へ歩き切った三秒後に「終了」という。

HTML

<div class="cow stop">🐮</div>
<br>
<button class="start" type="button">スタート</button>
<button class="reset1" type="button">リセット</button>

CSS

.cow {width:min(92.5%, 901px);font-size:x-large;transition:transform 3s}
.stop {transform:translateX(100%)}
.walk {transform:translateX(0)}

JavaScript

const cow = document.querySelector("div.cow");
const sfc = document.querySelector("button.star1");
const rfc = document.querySelector("button.reset1");
cow.addEventListener("transitionend", function() {
if (cow.classList.contains("walk")) {
cow.insertAdjacentHTML("beforeend", "「終了」"); }});
sfc.addEventListener("click", function() {
cow.classList.add("walk"); });
rfc.addEventListener("click", function() {
cow.classList.remove("walk"); cow.textContent = "🐮"; });

HTML要素にCSSのtransition:transformを使って時間差を付けて動かす場合、JavaScriptのaddEventListener()メソッドにtransitionendイベントを使って終了を検出すると即座に反応して何かできる。

animationendイベントでanimationを捕捉する

何かをCSSのanimationで動かしたら当のHTML要素をJavaScriptのaddEventListener()メソッドのanimationendで補足して終わりに連動して別の状態に持って行くのが簡単な使い方だ。

opacityとaddEventListenerによる連続動作のサンプル


ライオンが姿を現し切った三秒後に「終了」という。

HTML

<div class="lion invisible">🦁</div>
<br>
<button class="start2" type="button">スタート</button>
<button class="reset2" type="button">リセット</button>

CSS

.lion {font-size:x-large;}
.invisible {visibility:hidden}
.appear {animation:fadein 3s}
@keyframes fadein {from {opacity:0} to {opacity:1}}

JavaScript

const lion = document.querySelector("div.lion");
const sfl = document.querySelector("button.start2");
const rfl = document.querySelector("button.reset2");
lion.addEventListener("animationend", function() {
if (lion.classList.contains("appear")) {
lion.insertAdjacentHTML("beforeend", "「終了」"); }});
sfl.addEventListener("click", function() {
lion.classList.add("appear"); lion.classList.remove("invisible"); });
rfl.addEventListener("click", function() {
lion.classList.remove("appear"); lion.classList.add("invisible"); lion.textContent = "🦁"; });

HTML要素にCSSのanimationと@keyframesを使って時間差で動かす場合、JavaScriptのaddEventListener()メソッドにanimationendイベントを使って終了を検出すると即座に反応して何かできる。

何れも使い方の注意点は双方向(往復や出没など)でHTML要素を別々に扱いたいときは条件分岐のifなどにかけないと両方に同じ結果を繰り返してしまう。

およそJavaScriptのtransitionend/animationendイベントはメニューやボタンをCSSのtransition/animationの動作完了に合わせてdisplay:noneやvisibility:hiddenなどで消すのに最適だと思う。

時間差を取ってプログラムを実行するには通常はsetTime()メソッドかパフォーマンスをもっと安定させるにはrequestAnimation()メソッドが同じように使えるけれどもtransitionend/animationendイベントはそれに特化していてずれないから消すはずのものが失敗して出てしまうことがないのが嬉しい。

JavaScriptでCSSのtransition/animationを検出するイベントはそれぞれの「end」(終了)だけでなくて「start」(開始)や「cancel」(中止)のものもあるからアニメーションを伴う時間差のプログラムに相応しく使い分けられもする。

コメント

些細な日常の人気の投稿

PlayストアでAndroidアプリのダウンロードが非常に遅い場合の打開策

イメージ

偶に始まらなかったり、途中で止まったりもしていたPlayストアでのAndroidアプリのダウンロードは安定して来ていると思うし、喜ばしいかぎりの昨今だけれども速度自体はいつも同じではないから何だろうと訝られる。 余りに遅過ぎるわけではないし、お手上げとまでは行かないにせよ、非...

飽和脂肪酸の多いココナッツオイルの過剰摂取の危険性とその他の健康上の利点

イメージ

パンや菓子や揚げ物などに安く使用される マーガリンやショートニングなどのトランス脂肪酸が動脈硬化を引き起こすと世界的に避けられる 一方で、代わりに新しく使用される他の食用油によって必ずしも健康的な食生活が確保されるとはかぎらない状況も出て来てしまっているのが厄介なんだ。 脂...

早川愛の高校野球の夏の甲子園の大会歌の栄冠は君に輝くの独唱のソプラノの美声

イメージ

高校野球の夏の甲子園の 作新学院と今井達也の優勝の記事 を改善するために新しく引用できる動画はないかとYouTubeで探していたら2016年の地方予選の栃木大会だから当の作新学院と今井達也も参加して奇しくも予選の勝ち抜けと夏の甲子園での全国制覇への好影響を受けたかも知れなかった...