HTML
 Computer >> コンピューター >  >> プログラミング >> HTML

HTML DOM TransitionEventオブジェクトとは？主なプロパティと使い方を解説

TransitionEventオブジェクトとは

HTML DOMのTransitionEventオブジェクトは、CSSトランジション（transition）が発生した際に生成されるイベントを表すオブジェクトです。要素のスタイル変化アニメーションの開始や完了などのタイミングをJavaScriptで検知したい場合に活用できます。

TransitionEventオブジェクトには、主に以下のプロパティが用意されています。

プロパティ説明
propertyNameトランジションイベントが発生したときに、そのトランジションで使用されたCSSプロパティ名に対応する文字列を返します。
elapsedTimeトランジションイベントが発生した時点で、トランジションが実行されていた秒数に対応する数値を返します。
pseudoElementトランジションの対象となった擬似要素（::before など）の名前を返します。擬似要素が関与していない場合は空文字列を返します。

それでは、TransitionEvent の elapsedTime プロパティを使用した具体例を見ていきましょう。

サンプルコード

次のコードでは、円形のdiv要素にマウスカーソルを重ねると右へ移動するトランジションを設定し、transitionend イベント発生時に経過時間（elapsedTime）を画面に表示します。

<!DOCTYPE html>
<html>
<head>
<title>TransitionEvent elapsedTime</title>
<style>
    form {
        width:70%;
        margin: 0 auto;
        text-align: center;
    }
    * {
        padding: 2px;
        margin:5px;
    }
    input[type="button"] {
        border-radius: 10px;
    }
    #playArea {
        display: inline-block;
        border-radius: 50%;
        background-color: #DC3545;
        width: 50px;
        height: 50px;
        border: 3px solid #AC3509;
        transition: all 1.3s ease;
    }
    #playArea:hover {
        transform:translateX(80px);
    }
</style>
</head>
<body>
    <form>
        <fieldset>
            <legend>TransitionEvent-elapsedTime</legend>
            <div id="playArea"></div>
            <div id="divDisplay"></div>
        </fieldset>
    </form>
<script>
    var divDisplay = document.getElementById("divDisplay");
    var playDisplay = document.getElementById("playArea");
    function getElapsedTime(event) {
        divDisplay.textContent = 'Elapsed Time in Transition: '+event.elapsedTime+' seconds';
    }
    playDisplay.addEventListener("transitionend", getElapsedTime);
</script>
</body>
</html>

実行結果

div要素にマウスオーバーする前の状態：

HTML DOM TransitionEventオブジェクトとは？主なプロパティと使い方を解説

div要素にマウスオーバーした後の状態。トランジション完了後、経過時間が約1.3秒として表示されます：

HTML DOM TransitionEventオブジェクトとは？主なプロパティと使い方を解説

補足：TransitionEventが発生する主なイベントの種類

TransitionEventは、トランジションの状態に応じて以下のタイミングで発生します。用途に応じて適切なイベントを選択してください。

  • transitionrun：トランジションが作成されたとき（遅延時間の前に発生）
  • transitionstart：遅延時間が経過し、トランジションが実際に開始されたとき
  • transitionend：トランジションが正常に完了したとき
  • transitioncancel：トランジションが途中でキャンセルされたとき

これらのイベントと elapsedTime や propertyName といったプロパティを組み合わせることで、CSSアニメーションとJavaScriptを柔軟に連携させることが可能になります。

  1. HTML DOM HRオブジェクトとは？作成方法と使い方を解説

    HTML DOM の HR オブジェクトは、HTML 文書内の <hr> 要素を表すオブジェクトです。<hr> 要素は、コンテンツの話題やテーマの区切りを視覚的に示す水平線（罫線）として表示されます。JavaScript を使えば、この水平線を動的に生成してページに挿入することも可能です。ここでは、HR オブジェクトの基本的な作成方法と実践的な使用例を紹介します。HRオブジェクトの作成方法（構文）hr オブジェクトを新しく作成するには、document.createElement() メソッドを使用します。構文は以下のとおりです。document.createEleme

  2. HTML DOM Ulオブジェクトとは？<ul>要素の操作方法とサンプルコードを解説

    HTML DOM の Ul オブジェクトは、HTML の <ul>（順序なしリスト）要素を表すオブジェクトです。JavaScript を使うことで、リストの動的な生成や操作が可能になります。 <ul> 要素の作成方法 新しい <ul> 要素を作成するには、document.createElement() メソッドを使用します。 var ulObject = document.createElement(UL) HTML5で非推奨となったプロパティ ulObject には以下のプロパティが存在しますが、これらは HTML5 ではサポートされていないため注