onanimationcancel属性

animationcancel 事件的事件处理程序。当CSS动画意外中止时（换句话说，在任何时候它停止运行而不发送animationend事件）时将发送此事件，例如当animation-name被改变，动画被删除，或者动画节点被隐藏时（可能是直接的或者是因为它的任何包含节点都被隐藏），请使用CSS。

onanimationcancel属性语法

var animCancelHandler = target.onanimationcancel;

target.onanimationcancel = Function

onanimationcancel属性值

在animationcancel事件发生时调用的Function，它指示在target上CSS动画已经开始，其中，所述目标对象是一个HTML元素（HTMLElement），文件（Document），或窗口（Window）。该函数接收作为输入的单个参数：描述发生事件的AnimationEvent对象。

onanimationcancel属性示例

HTML内容

<div class="main">
  <div id="box" onanimationcancel="handleCancelEvent(event);">
    <div id="text">Box</div>
  </div>
</div>

<div class="button" id="toggleBox">
  Hide the Box
</div>

<pre id="log"></pre>

CSS内容

我们来看看我们正在动画的盒子的样式。首先是盒子本身，其所有属性，包括定义的animation。我们继续在此处描述动画，因为动画是在页面加载后立即开始的，而不是基于事件。

#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;
} 

接下来介绍动画的关键帧，从内容框的左上角到右下角绘制一个课程。

@keyframes slideBox {
  from {
    left:0;
    top:0;
  }
  to {
    left:calc(100% - var(--boxwidth));
    top:calc(100% - var(--boxwidth))
  }
}

由于动画被描述为发生无数次，每次交替方向，盒子将在两个角落之间来回滑动直到停止或页面关闭。

JavaScript内容

在我们开始使用动画代码之前，我们定义一个函数，并将信息记录到用户屏幕上的一个框中。我们将使用它来显示关于我们收到的事件的信息。请注意使用AnimationEvent.animationName和AnimationEvent.elapsedTime获取有关发生的事件的信息。

function log(msg, event) {
  let logBox = document.getElementById("log");
 
  logBox.innerHTML += msg;
 
  if (event) {
    logBox.innerHTML += " <code>"+ event.animationName +
        "</code> at time " + event.elapsedTime.toFixed(2) +
        " seconds.";
  }
 
  logBox.innerHTML += "\n";
};

然后我们建立了handleCancelEvent()函数，这个函数在响应animationcancel事件时调用，它是在上文中的HTML部分设置的。我们在这里所做的是将日志信息发送到控制台，但是您可能会发现其他用例，例如开始新的动画或效果，或终止某些相关操作。

function handleCancelEvent(event) {
  log("Animation canceled", event);
}; 

然后，我们添加一个方法来处理"flex"和"none"之间的切换display，并将它建立为“隐藏/显示（Hide/Show）”Box按钮上的click事件的处理程序：

document.getElementById('toggleBox').addEventListener('click', function() {
  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";
  }
});

切换方框为display: none将会取消其动画效果。在支持animationcancel的浏览器中，该事件被触发并且该处理程序被调用。

注意：目前，主要的浏览器不支持animationcancel。

如果您的浏览器支持animationcancel，使用按钮隐藏该框会导致显示有关该事件的消息。

规范

浏览器兼容性

我们正在将兼容性数据转换为机器可读的JSON格式。

• 电脑端

• 移动端