---
title: GlobalEventHandlers.ontransitionend
slug: Web/API/GlobalEventHandlers/ontransitionend
tags:
  - API
  - CSS Transitions
  - CSS3 Transitions
  - Document
  - Element
  - Event Handler
  - GlobalEventHandlers
  - Property
  - Reference
  - Window
  - ontransitionend
translation_of: Web/API/GlobalEventHandlers/ontransitionend
---
<div>{{APIRef("CSS3 Transitions")}}</div>

<p><strong><code>ontransitionend</code></strong> は {{domxref("GlobalEventHandlers")}} ミックスインのプロパティで、 {{event("transitionend")}} イベントを処理するイベントハンドラー ({{event("Event_handlers", "event handler")}}) です。</p>

<p><code>transitionend</code> イベントは、 <a href="/ja/docs/Web/CSS/CSS_Transitions">CSS トランジション</a>が完了すると発生します。</p>

<div class="note">
<p>トランジションの実行が完了する前に対象ノードからトランジションが削除された場合、 {{event("transitionend")}} イベントは生成されません。これは、対象に適用される {{cssxref("transition-property")}} 属性の値を変更することで発生します。もう一つは、 {{cssxref("display")}} 属性が <code>none</code> に設定されている場合です。</p>
</div>

<h2 id="Syntax" name="Syntax">構文</h2>

<pre class="syntaxbox notranslate">var <var>transitionEndHandler</var> = <var>target</var>.ontransitionend;

<var>target</var>.ontransitionend = <var>{{jsxref("Function")}}</var>
</pre>

<h3 id="Value" name="Value">値</h3>

<p>関数 ({{jsxref("Function")}}) で、 CSS トランジションの完了を示す {{event("transitionend")}} イベントが <code><var>target</var></code> 上で発生した場合に呼び出されるものです。対象となるオブジェクトは HTML 要素 ({{domxref("HTMLElement")}})、文書 ({{domxref("Document")}})、ウィンドウ ({{domxref("Window")}}) です。この関数は単一の引数、発生したイベントを記述する {{domxref("TransitionEvent")}} を単一の引数として受け取ります。イベントの {{domxref("TransitionEvent.elapsedTime")}} プロパティの値は、 {{cssxref("transition-duration")}} の値と同じでなければなりません。</p>

<div class="note">
<p><code>elapsedTime</code> には、トランジション効果が始まる前の時間は含まれていません。つまり、 {{cssxref("transition-delay")}} の値は、待ち時間が終了してアニメーションが始まるまでは 0 である <code>elapsedTime</code> の値に影響しません。</p>
</div>

<h2 id="Example" name="Example">例</h2>

<p>この例では、{{event("transitionrun")}} イベントと {{event("transitionend")}} イベントを使用して、トランジションの開始と終了を検出し、トランジション中にテキスト更新が発生するようにしています。これは、アニメーションやその他のエフェクトを起動して、反応を連鎖させるために使用することもできます。</p>

<h3 id="HTML" name="HTML">HTML</h3>

<p>これは単純に {{HTMLElement("div")}} を作成するだけで、以下の CSS でスタイルを変更して、ボックスの大きさを変更したり色を変更したりします。</p>

<pre class="brush: html; notranslate">&lt;div class="box"&gt;&lt;/div&gt;
</pre>

<h3 id="CSS" name="CSS">CSS</h3>

<p>以下の CSS は、ボックスのスタイルを設定し、ボックスの色と大きさを変化させ、マウスカーソルがボックスの上に乗っている間にボックスが回転するようなトランジション効果を適用しています。</p>

<pre class="brush: css; highlight:[13,14] notranslate">.box {
  margin-left: 70px;
  margin-top: 30px;
  border-style: solid;
  border-width: 1px;
  display: block;
  width: 100px;
  height: 100px;
  background-color: #0000FF;
  color: #FFFFFF;
  padding: 20px;
  font: bold 1.6em "Helvetica", "Arial", sans-serif;
  transition: width 2s, height 2s, background-color 2s, transform 2s, color 2s;
}

.box:hover {
  background-color: #FFCCCC;
  color: #000000;
  width: 200px;
  height: 200px;
  transform: rotate(180deg);
}
</pre>

<h3 id="JavaScript" name="JavaScript">JavaScript</h3>

<p>次に、トランジションの開始時と終了時にボックスのテキストコンテンツを変更するためにイベントハンドラ－を設定します。</p>

<pre class="brush: js notranslate">let box = document.querySelector(".box");
box.ontransitionrun = function(event) {
  box.innerHTML = "Zooming...";
}
box.ontransitionend = function(event) {
  box.innerHTML = "Done!";
}
</pre>

<h3 id="Result" name="Result">結果</h3>

<p>結果のコンテンツは次のようになります。</p>

<p>{{EmbedLiveSample('Example', 600, 280)}}</p>

<p>マウスカーソルをボックスの上に置いてから、マウスを移動させるとどうなるかに注目してください。</p>

<h2 id="Specification" name="Specification">仕様書</h2>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">仕様書</th>
   <th scope="col">状態</th>
   <th scope="col">備考</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>{{SpecName('CSS3 Transitions','#dom-globaleventhandlers-ontransitionend','ontransitionend')}}</td>
   <td>{{Spec2('CSS3 Transitions')}}</td>
   <td></td>
  </tr>
 </tbody>
</table>

<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2>

<p>{{Compat("api.GlobalEventHandlers.ontransitionend")}}</p>

<h2 id="See_also" name="See_also">関連情報</h2>

<ul>
 <li>このハンドラーを起動する {{event("transitionend")}} イベント</li>
 <li>{{domxref("TransitionEvent")}}</li>
 <li>トランジションが開始したときに発生する {{event("transitionrun")}} イベント</li>
</ul>