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
|
---
title: transitionend
slug: Web/Events/transitionend
translation_of: Web/API/HTMLElement/transitionend_event
---
<div>{{APIRef}}</div>
<p><code>transitionend</code> 事件会在 <a href="/en-US/docs/CSS/Using_CSS_transitions">CSS transition</a> 结束后触发. 当transition完成前移除transition时，比如移除css的{{cssxref("transition-property")}} 属性，事件将不会被触发.如在transition完成前设置 {{cssxref("display")}} 为"<code>none"</code>，事件同样不会被触发。</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/ontransitionend", "ontransitionend")}}</td>
</tr>
</tbody>
</table>
<p><code>transitionend</code> 事件是双向触发的 - 当完成到转换状态的过渡，以及完全恢复到默认或非转换状态时都会触发。 如果没有过渡延迟或持续时间，即两者的值都为0s或者都未声明， 则不发生过渡，并且任何过渡事件都不会触发。如果触发了 <code>transitioncancel</code> 事件，则<code>transitionend</code> 事件不会触发。</p>
<h2 id="例">例</h2>
<pre class="brush: js">/*
* 在指定的元素上监听transitionend事件, 例如#slidingMenu
* 然后指定一个函数, 例如 showMessage()
*/
function showMessage() {
console.log('Transition 已完成');
}
var element = document.getElementById("slidingMenu");
element.addEventListener("transitionend", showMessage, false);
</pre>
<h2 id="规范">规范</h2>
<table class="standard-table">
<thead>
<tr>
<th scope="col">Specification</th>
<th scope="col">Status</th>
<th scope="col">Comment</th>
</tr>
</thead>
<tbody>
<tr>
<td>{{SpecName("CSS3 Transitions", "#transition-events", "transitionend")}}</td>
<td>{{ Spec2('CSS3 Transitions') }}</td>
<td>Initial definition.</td>
</tr>
</tbody>
</table>
<h2 id="浏览器兼容性">浏览器兼容性</h2>
<p>{{ CompatibilityTable() }}</p>
<div id="compat-desktop">
<table class="compat-table">
<tbody>
<tr>
<th>Feature</th>
<th>Chrome</th>
<th>Firefox (Gecko)</th>
<th>Internet Explorer</th>
<th>Opera</th>
<th>Safari (WebKit)</th>
</tr>
<tr>
<td>Basic support</td>
<td>1.0<sup>[1]</sup><br>
36</td>
<td>{{CompatGeckoDesktop("2.0")}}</td>
<td>10</td>
<td>10.5<sup>[2]</sup><br>
12<br>
12.10<br>
23</td>
<td>3.2<sup>[1]</sup><br>
7.0.6</td>
</tr>
</tbody>
</table>
</div>
<div id="compat-mobile">
<table class="compat-table">
<tbody>
<tr>
<th>Feature</th>
<th>Android</th>
<th>Firefox Mobile (Gecko)</th>
<th>IE Phone</th>
<th>Opera Mobile</th>
<th>Safari Mobile</th>
</tr>
<tr>
<td>Basic support</td>
<td>2.1</td>
<td>{{CompatGeckoMobile("2.0")}}</td>
<td>{{CompatUnknown}}</td>
<td>10<sup>[2]</sup><br>
12<br>
12.10</td>
<td>3.2<sup>[1]</sup></td>
</tr>
</tbody>
</table>
</div>
<p>[1] 在 Chrome 1.0, Android 2.1 与 WebKit 3.2 上实现 <code>webkitTransitionEnd</code>. Chrome 36 与 WebKit 7.0.6 上请使用标准事件 <code>transitionend</code>.</p>
<p>[2] 在 Opera 10.5 上实现<code>oTransitionEnd</code>，从版本12开始实现 <code>otransitionend，</code> 从版本12.10开始实现 <code>transitionend.</code></p>
<h2 id="参考">参考</h2>
<ul>
<li>The {{ domxref("TransitionEvent") }} interface and the <a href="/en-US/docs/Mozilla_event_reference/transitionend" title="The 'transitionend' event"><code>transitionend</code></a> event.</li>
<li>{{cssxref("transition")}}, {{cssxref("transition-delay")}}, {{cssxref("transition-duration")}}, {{cssxref("transition-property")}}, {{cssxref("transition-timing-function")}}.</li>
</ul>
|
