window属性:ontransitioncancel

2018-06-01 11:17 更新

ontransitioncancel属性

transitioncancel事件的事件处理程序。该事件在CSS转换被取消时发送。

在以下情况下,转换被取消:

  • 适用于目标的transition-property属性值将更改
  • 该display属性设置为"none"。
  • 转换在运行完成之前停止,例如通过将鼠标移出悬停转换元素。

ontransitioncancel属性语法

var transitionCancelHandler = target.ontransitioncancel;

target.ontransitioncancel = Function

ontransitioncancel属性值

当被调用transitioncancel事件发生时要调用的Function,指示在target对象上已取消了 CSS 转换,其中,所述target对象是一个HTML元素(HTMLElement),文件(Document),或窗口(Window)。该函数接收作为输入的单个参数:描述发生的事件的TransitionEvent对象;事件的TransitionEvent.elapsedTime属性值应该与transition-duration的值相同。

注意:elapsedTime不包括过渡效果开始之前的时间;这意味着该transition-delay值不会影响该elapsedTime值,直到延迟周期结束并且动画开始,该值才为零。

ontransitioncancel属性示例

在本例中,我们使用transitionrun和transitionend事件来检测转换何时开始和结束,以便在转换期间发生文本更新。这也可以用来触发动画或其他效果,以允许链接反应。

另外,我们还使用一个click事件使框消失(display: none;),显示它如何触发transitioncancel事件触发。

HTML内容

这只是简单地创建一个<div>,我们将用下面的CSS样式来制作一个调整大小和改变颜色等的框。

<div class="box"></div>

CSS内容

下面的CSS对框进行样式设置,并应用转换效果,使框的颜色和大小发生变化,并使框旋转,同时鼠标光标悬停在该框上。

.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);
}

JavaScript内容

接下来,我们需要建立事件处理程序,以便在过渡开始和结束时更改框的文本内容。

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';
  timeout = window.setTimeout(appear, 2000);
  function appear() {
    box.style.display = 'block';
  }
}

box.ontransitioncancel = function(event) {
  console.log('transitioncancel fired after ' + event.elapsedTime + ' seconds.');
}

当您运行代码时应该注意将鼠标光标悬停在框上时会发生什么,然后将其移开。

还请注意当您单击该框时出现在JavaScript控制台中的日志,或者在转换运行完成之前将光标移开。

规范

规范 状态 注释
CSS转换
该规范中的'ontransitioncancel'的定义。
Working Draft
 

浏览器兼容性

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

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

特征 Android Android Webview Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile Chrome for Android
基本支持 ? ? 支持:53.0 ? ? ? 支持
以上内容是否对您有帮助:
在线笔记
App下载
App下载

扫描二维码

下载编程狮App

公众号
微信公众号

编程狮公众号