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
135
136
137
138
139
140
141
142
143
144
145
146
147
|
---
title: GlobalEventHandlers.ontransitioncancel
slug: Web/API/GlobalEventHandlers/ontransitioncancel
translation_of: Web/API/GlobalEventHandlers/ontransitioncancel
---
<div>{{APIRef("CSS3 Transitions")}}</div>
<p>{{domxref("GlobalEventHandlers")}}混合 的 <code><strong>ontransitioncancel</strong></code> 属性 是处理 {{event("transitioncancel")}} 事件的手柄{{domxref("EventHandler")}}.</p>
<div class="blockIndicator note">
<p>domxref("GlobalEventHandlers") 与 domxref("EventHandler")： dom修订版本的事件手柄。</p>
<p>event("transitioncancel")：transitioncancel事件</p>
</div>
<p>当CSS转换被取消时，transitioncancel事件被触发。当以下情况时，过渡被取消::</p>
<ul>
<li>应用于目标的{{cssxref("transition-property")}}属性的值被更改</li>
<li>{{cssxref("display")}}属性被设置为"none"。</li>
<li>转换在运行到完成之前就停止了，例如通过将鼠标移出悬浮过渡元素。</li>
</ul>
<h2 id="Syntax">Syntax</h2>
<pre class="syntaxbox">var <em>transitionCancelHandler</em> = <em>target</em>.ontransitioncancel;
<em>target</em>.ontransitioncancel = <em>{{jsxref("Function")}}</em>
</pre>
<h3 id="Value">Value</h3>
<p>A {{jsxref("Function")}} to be called when a {{event("transitioncancel")}} event occurs indicating that a CSS transition has been cancelled on the <em><code>target</code></em>, where the target object is an HTML element ({{domxref("HTMLElement")}}), document ({{domxref("Document")}}), or window ({{domxref("Window")}}). The function receives as input a single parameter: a {{domxref("TransitionEvent")}} object describing the event which occurred; the event's {{domxref("TransitionEvent.elapsedTime")}} property's value should be the same as the value of {{cssxref("transition-duration")}}.</p>
<div class="note">
<p><strong>Note</strong>: elapsedTime不包括过渡效果开始之前的时间;这意味着{{cssxref("transition-delay")}}的值不会影响elapsedTime的值，elapsedTime在延迟周期结束和动画开始之前都是0。</p>
</div>
<h2 id="Example">Example</h2>
<p>在本例中，我们使用{{event("transitionrun")}}和{{event("transitionend")}}事件来检测转换何时开始和结束，从而导致在转换期间发生文本更新。这也可以用来触发动画或其他效果，以允许连锁反应。</p>
<p>除此之外, 我们也使用 {{event("click")}} 事件使盒子消失 (<code>display: none;</code>), 显示如何触发 {{event("transitioncancel")}} 事件.</p>
<h3 id="HTML_content">HTML content</h3>
<p>这只是简单地创建了一个{{HTMLElement("div")}}，我们将在下面用CSS样式使其成为一个框，调整大小和改变颜色等。</p>
<pre class="brush: html;"><div class="box"></div>
</pre>
<h3 id="CSS_content">CSS content</h3>
<p>下面的CSS样式框和应用一个过渡效果，使框的颜色和大小改变，并导致框旋转，而鼠标光标在它上面。</p>
<pre class="brush: css; highlight:[13,14]">.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;
-webkit-transition: width 2s, height 2s, background-color 2s, -webkit-transform 2s, color 2s;
transition: width 2s, height 2s, background-color 2s, transform 2s, color 2s;
}
.box:hover {
background-color: #FFCCCC;
color: #000000;
width: 200px;
height: 200px;
-webkit-transform: rotate(180deg);
transform: rotate(180deg);
}
</pre>
<h3 id="JavaScript_content">JavaScript content</h3>
<p>然后, 我们需要建立事件处理程序，以便在转换开始和结束时更改框的文本内容。</p>
<pre class="brush: js">let box = document.querySelector(".box");
box.ontransitionrun = function(event) {
box.innerHTML = "Zooming...";
}
box.ontransitionend = function(event) {
box.innerHTML = "Done!";
}
box.onclick = function() {
box.style.display = 'none';
<code class="language-js">timeout <span class="operator token">=</span> window<span class="punctuation token">.</span><span class="function token">setTimeout</span><span class="punctuation token">(appear</span><span class="punctuation token">,</span> <span class="number token">2000</span><span class="punctuation token">)</span><span class="punctuation token">;
function appear() {
</span></code>box.style.display = 'block';
<code class="language-js"><span class="punctuation token"> }</span></code>
}
box.ontransitioncancel = function(event) {
console.log('transitioncancel fired after ' + event.<code>elapsedTime + ' seconds.'</code>);
}
</pre>
<h3 id="Result">Result</h3>
<p>The resulting content looks like this:</p>
<p>{{EmbedLiveSample('Example', 600, 280)}}</p>
<p>Notice what happens when you hover your mouse cursor over the box, then move it away.</p>
<p>Also note the log that appears in the JavaScript console when you click the box, or move the cursor away before the transition has run to completion.</p>
<h2 id="Specification">Specification</h2>
<table class="spectable standard-table">
<tbody>
<tr>
<th scope="col">Specification</th>
<th scope="col">Status</th>
<th scope="col">Comment</th>
</tr>
<tr>
<td>{{SpecName('CSS3 Transitions','#dom-globaleventhandlers-ontransitioncancel','ontransitioncancel')}}</td>
<td>{{Spec2('CSS3 Transitions')}}</td>
<td></td>
</tr>
</tbody>
</table>
<h2 id="Browser_compatibility">Browser compatibility</h2>
<p>{{Compat("api.GlobalEventHandlers.ontransitioncancel")}}</p>
<h2 id="See_also">See also</h2>
<ul>
<li>The {{event("transitioncancel")}} event this event handler is triggered by</li>
<li>{{domxref("TransitionEvent")}}</li>
<li>The {{event("transitionrun")}} event, which occurs when the transition begins</li>
</ul>
|
