1 files changed, 147 insertions, 0 deletions
diff --git a/files/zh-cn/web/api/globaleventhandlers/ontransitioncancel/index.html b/files/zh-cn/web/api/globaleventhandlers/ontransitioncancel/index.html
new file mode 100644
index 0000000000..b6f15f3181
--- /dev/null
+++ b/files/zh-cn/web/api/globaleventhandlers/ontransitioncancel/index.html
@@ -0,0 +1,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;">&lt;div class="box"&gt;&lt;/div&gt;
+</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>