1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
|
---
title: 'HTMLElement: transitionstart イベント'
slug: Web/API/HTMLElement/transitionstart_event
tags:
- CSS Transitions
- CSS トランジション
- DOM
- Event
- Reference
- TransitionEvent
- transitionstart
- イベント
translation_of: Web/API/HTMLElement/transitionstart_event
---
<div>{{APIRef}}{{SeeCompatTable}}</div>
<p><strong><code>transitionstart</code></strong> イベントは、<a href="/ja/docs/Web/CSS/CSS_Transitions/Using_CSS_transitions">CSS トランジション</a>が実際に開始されたとき、すなわち、{{cssxref("transition-delay")}} が終了したときに発生します。</p>
<table class="properties">
<tbody>
<tr>
<th scope="row">バブリング</th>
<td>あり</td>
</tr>
<tr>
<th scope="row">キャンセル可能</th>
<td>いいえ</td>
</tr>
<tr>
<th scope="row">インターフェイス</th>
<td>{{domxref("TransitionEvent")}}</td>
</tr>
<tr>
<th scope="row">イベントハンドラープロパティ</th>
<td>{{domxref("GlobalEventHandlers/ontransitionstart", "ontransitionstart")}}</td>
</tr>
</tbody>
</table>
<h2 id="Examples" name="Examples">例</h2>
<p>このコードでは <code>transitionstart</code> イベントにリスナーを追加しています:</p>
<pre class="brush: js line-numbers language-js"><code class="language-js">element<span class="punctuation token">.</span><span class="function token">addEventListener</span><span class="punctuation token">(</span><span class="string token">'transitionstart'</span><span class="punctuation token">,</span> <span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="operator token">=></span> <span class="punctuation token">{</span>
console<span class="punctuation token">.</span><span class="function token">log</span><span class="punctuation token">(</span><span class="string token">'Started transitioning'</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
<span class="punctuation token">}</span><span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre>
<p>似ていますが、 <code>addEventListener()</code>の代わりに <code><a href="https://developer.mozilla.org/ja/docs/Web/API/GlobalEventHandlers/ontransitionrun">ontransitionstart</a></code> プロパティを使っています:</p>
<pre class="brush: js line-numbers language-js"><code class="language-js">element<span class="punctuation token">.</span><span class="function function-variable token">ontransitionrun</span> <span class="operator token">=</span> <span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="operator token">=></span> <span class="punctuation token">{</span>
console<span class="punctuation token">.</span><span class="function token">log</span><span class="punctuation token">(</span><span class="string token">'Started transitioning'</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
<span class="punctuation token">}</span><span class="punctuation token">;</span></code></pre>
<h3 id="Live_example" name="Live_example">Live example</h3>
<p>以下の例では、単純な {{htmlelement("div")}} 要素を用い、遅延を含むトランジションでスタイル付けしています。</p>
<pre class="brush: html"><div class="transition"></div>
<div class="message"></div></pre>
<pre class="brush: css">.transition {
width: 100px;
height: 100px;
background: rgba(255,0,0,1);
transition-property: transform background;
transition-duration: 2s;
transition-delay: 2s;
}
.transition:hover {
transform: rotate(90deg);
background: rgba(255,0,0,0);
}</pre>
<p>これに、{{domxref("HTMLElement/transitionstart_event", "transitionstart")}} および {{domxref("HTMLElement/transitionrun_event", "transitionrun")}} イベントが発生する場所を示す JavaScript を追加します。</p>
<pre class="brush: js">const transition = document.querySelector('.transition');
const message = document.querySelector('.message');
transition.addEventListener('transitionrun', function() {
message.textContent = 'transitionrun fired';
});
transition.addEventListener('transitionstart', function() {
message.textContent = 'transitionstart fired';
});
transition.addEventListener('transitionend', function() {
message.textContent = '<code class="language-js"><span class="string token">transitionend fired</span></code><code>'</code>;
});
</pre>
<p>{{ EmbedLiveSample('Examples', '100%', '150px') }}</p>
<p>相違点は以下のとおりです。</p>
<ul>
<li>transitionrun は、トランジションが生成されるときに発生します (つまり、あらゆる遅延時間の始め)。</li>
<li>transitionstart は実際にアニメーションが始まるときに発生します。(つまり、あらゆる遅延時間の終わり)。</li>
</ul>
<h2 id="Specifications" name="Specifications">仕様書</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', '#transitionstart', 'transitionstart')}}</td>
<td>{{Spec2('CSS3 Transitions')}}</td>
<td>初回定義</td>
</tr>
</tbody>
</table>
<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザー実装状況</h2>
<p>{{Compat("api.HTMLElement.transitionstart_event")}}</p>
<h2 id="See_also" name="See_also">関連情報</h2>
<ul>
<li>{{domxref("GlobalEventHandlers.ontransitionstart")}} イベントハンドラー</li>
<li>{{domxref("TransitionEvent")}} インターフェイス</li>
<li>CSS プロパティ: {{cssxref("transition")}}, {{cssxref("transition-delay")}}, {{cssxref("transition-duration")}}, {{cssxref("transition-property")}}, {{cssxref("transition-timing-function")}}</li>
<li>関連イベント: {{domxref("HTMLElement/transitionend_event", "transitionend")}}, {{domxref("HTMLElement/transitionrun_event", "transitionrun")}}, {{domxref("HTMLElement/transitioncancel_event", "transitioncancel")}}</li>
<li>{{domxref("Document")}} に対するこのイベント: {{domxref("Document/transitionstart_event", "transitionstart")}}</li>
<li>{{domxref("Window")}} に対するこのイベント: {{domxref("Window/transitionstart_event", "transitionstart")}}</li>
</ul>
|
