window属性:onanimationcancel

2018-04-18 10:52 更新

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,使用按钮隐藏该框会导致显示有关该事件的消息。

规范

规范 状态 注释
CSS动画(CSS Animations
在该规范中定义'onanimationcancel'。
Working Draft
 

浏览器兼容性

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

  • 电脑端
特征 Chrome
Firefox(Gecko)
Edge
Internet Explorer
Opera
Safari(WebKit)
基本支持 不支持 支持:54 ? 
  • 移动端

特征AndroidAndroid WebviewFirefox Mobile (Gecko)Firefox OSIE MobileOpera MobileSafari MobileChrome for Android
基本支持?不支持支持:54.0????不支持
以上内容是否对您有帮助:
在线笔记
App下载
App下载

扫描二维码

下载编程狮App

公众号
微信公众号

编程狮公众号