path: root/files/zh-cn/web/api/globaleventhandlers/onanimationcancel/index.html

---
title: GlobalEventHandlers.onanimationcancel
slug: Web/API/GlobalEventHandlers/onanimationcancel
translation_of: Web/API/GlobalEventHandlers/onanimationcancel
---
<div>{{APIRef("CSS3 Animations")}}</div>

<p>animationcancel是一个事件处理操作,这个事件在<a href="/en-US/docs/Web/CSS/CSS_Animations">CSS Animation</a>属性意外中断时派发出来(换句话说，任何时候animation停止运行不会发出一个animationend 事件，比如，当animation-name改变以后，animation 就会被移除，或者动画节点隐藏—当前元素或者任何包含的节点隐藏)—使用css时.</p>

<h2 id="语法">语法</h2>

<pre class="syntaxbox">var <em>animCancelHandler</em> = <em>target</em>.onanimationcancel;

<em>target</em>.onanimationcancel = <em>{{jsxref("Function")}}</em>
</pre>

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

<p>A {{jsxref("Function")}} to be called when an {{event("animationcancel")}} event occurs indicating that a CSS animation has begun 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: an {{domxref("AnimationEvent")}} object describing the event which occurred.</p>

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

<h3 id="HTML_content">HTML content</h3>

<pre class="brush: html">&lt;div class="main"&gt;
  &lt;div id="box"&gt;
    &lt;div id="text" onanimationcancel="handleCancelEvent"&gt;Box&lt;/div&gt;
  &lt;/div&gt;
&lt;/div&gt;

&lt;div class="button" id="toggleBox"&gt;
  Hide the Box
&lt;/div&gt;

&lt;pre id="log"&gt;&lt;/pre&gt;</pre>

<h3 id="CSS_content">CSS content</h3>

<div class="hidden">
<pre class="brush: css">:root {
  --boxwidth:50px;
}

.main {
  width: 300px;
  height:300px;
  border: 1px solid black;
}

.button {
  cursor: pointer;
  width: 300px;
  border: 1px solid black;
  font-size: 16px;
  text-align: center;
  margin-top: 0;
  padding-top: 2px;
  padding-bottom: 4px;
  color: white;
  background-color: darkgreen;
  font: 14px "Open Sans", "Arial", sans-serif;
}

#text {
  width: 46px;
  padding: 10px;
  position: relative;
  text-align: center;
  align-self: center;
  color: white;
  font: bold 1.4em "Lucida Grande", "Open Sans", sans-serif;
}

 </pre>
</div>

<p>Leaving out some bits of the CSS that don't matter for the discussion here, let's take a look at the styles for the box that we're animating. First is the box itself, with all its properties, including {{cssxref("animation")}}, defined. We go ahead and describe the animation in-place here because the animation is intended to begin as soon as the page loads, rather than based on an event.</p>

<pre class="brush: css">#box {
  width: var(--boxwidth);
  height: var(--boxwidth);
  left: 0;
  top: 0;
  border: 1px solid #7788FF;
  margin: 0;
  position: relative;
  background-color: #2233FF;
  display: flex;
  justify-content: center;
  animation: 5s ease-in-out 0s infinite alternate both slideBox;
}

</pre>

<p>The animation's keyframes are described next, plotting a course from the top-left corner of the content box to the bottom-right corner.</p>

<pre class="brush: css">@keyframes slideBox {
  from {
    left:0;
    top:0;
  }
  to {
    left:calc(100% - var(--boxwidth));
    top:calc(100% - var(--boxwidth))
  }
}
</pre>

<p>Since the animation is described as taking place an infinite number of times, alternating direction each time, the box will glide back and forth between the two corners until stopped or the page is closed.</p>

<h3 id="JavaScript_content">JavaScript content</h3>

<p>Before we get to the animation code, we define a function which logs information to a box on the user's screen. We'll use this to show information about the events we receive. Note the use of {{domxref("AnimationEvent.animationName")}} and {{domxref("AnimationEvent.elapsedTime")}} to get information about the event which occurred.</p>

<pre class="brush: js">function log(msg, event) {
  let logBox = document.getElementById("log");

  logBox.innerHTML += msg;

  if (event) {
    logBox.innerHTML += " &lt;code&gt;"+ event.animationName +
        "&lt;/code&gt; at time " + event.elapsedTime.toFixed(2) +
        " seconds.";
  }

  logBox.innerHTML += "\n";
};


</pre>

<p>Then we set up the <code>handleCancelEvent()</code> function, which is called in response to the {{event("animationcancel")}} event, as set up in the HTML above. All we do here is log information to the console, but you might find other use cases, such as starting a new animation or effect, or terminating some dependent operation.</p>

<pre class="brush: js">function handleCancelEvent(event) {
  log("Animation canceled", event);
};

</pre>

<p>Then we add a method to handle toggle {{cssxref("display")}} between <code>"</code><code>flex"</code> and <code>"</code><code>none"</code> and establish it as the handler for a {{event("click")}} event on the "Hide/Show" the Box button:</p>

<pre class="brush: js">function toggleBox() {
  if (box.style.display == "none") {
    box.style.display = "flex";
    document.getElementById("toggleBox").innerHTML = "Hide the box";
  } else {
    box.style.display = "none";
    document.getElementById("toggleBox").innerHTML = "Show the box";
  }
}</pre>

<p>Toggling the box to <code>display: none</code> has the effect of aborting its animation. In browsers that support {{event("animationcancel")}}, the event is fired and this handler is called.</p>

<div class="note">
<p>At this time, no major browser supports <code>animationcancel</code>.</p>
</div>

<h3 id="Result">Result</h3>

<p>Assembled together, you get this:</p>

<p>{{ EmbedLiveSample('Example', 500, 400) }}</p>

<p>If your browser supports <code>animationcancel</code>, hiding the box using the button will cause a message to be displayed about the event.</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 Animations','#eventdef-animationevent-animationcancel','onanimationcancel')}}</td>
   <td>{{Spec2('CSS3 Animations')}}</td>
   <td> </td>
  </tr>
 </tbody>
</table>

<h2 id="Browser_compatibility">Browser compatibility</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>Microsoft Edge</th>
   <th>Internet Explorer</th>
   <th>Opera</th>
   <th>Safari (WebKit)</th>
  </tr>
  <tr>
   <td>Basic support</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatNo}}<sup>[1]</sup></td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
  </tr>
 </tbody>
</table>
</div>

<div id="compat-mobile">
<table class="compat-table">
 <tbody>
  <tr>
   <th>Feature</th>
   <th>Android</th>
   <th>Android Webview</th>
   <th>Firefox Mobile (Gecko)</th>
   <th>Firefox OS</th>
   <th>IE Mobile</th>
   <th>Opera Mobile</th>
   <th>Safari Mobile</th>
   <th>Chrome for Android</th>
  </tr>
  <tr>
   <td>Basic support</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatNo}}<sup>[1]</sup></td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatNo}}</td>
  </tr>
 </tbody>
</table>
</div>

<p>[1] For details on the status of implementation in Firefox, see {{bug(1302648)}}.</p>

<h2 id="See_also">See also</h2>

<ul>
 <li>The {{event("animationcancel")}} event this event handler is triggered by.</li>
 <li>{{domxref("AnimationEvent")}}</li>
</ul>