window屬性:ontransitioncancel

2018-06-01 11:17 更新

ontransitioncancel屬性

transitioncancel事件的事件處理程序。該事件在CSS轉換被取消時發(fā)送。

在以下情況下,轉換被取消:

  • 適用于目標的transition-property屬性值將更改
  • 該display屬性設置為"none"。
  • 轉換在運行完成之前停止,例如通過將鼠標移出懸停轉換元素。

ontransitioncancel屬性語法

var transitionCancelHandler = target.ontransitioncancel;

target.ontransitioncancel = Function

ontransitioncancel屬性值

當被調用transitioncancel事件發(fā)生時要調用的Function,指示在target對象上已取消了 CSS 轉換,其中,所述target對象是一個HTML元素(HTMLElement),文件(Document),或窗口(Window)。該函數接收作為輸入的單個參數:描述發(fā)生的事件的TransitionEvent對象;事件的TransitionEvent.elapsedTime屬性值應該與transition-duration的值相同。

注意:elapsedTime不包括過渡效果開始之前的時間;這意味著該transition-delay值不會影響該elapsedTime值,直到延遲周期結束并且動畫開始,該值才為零。

ontransitioncancel屬性示例

在本例中,我們使用transitionrun和transitionend事件來檢測轉換何時開始和結束,以便在轉換期間發(fā)生文本更新。這也可以用來觸發(fā)動畫或其他效果,以允許鏈接反應。

另外,我們還使用一個click事件使框消失(display: none;),顯示它如何觸發(fā)transitioncancel事件觸發(fā)。

HTML內容

這只是簡單地創(chuàng)建一個<div>,我們將用下面的CSS樣式來制作一個調整大小和改變顏色等的框。

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

CSS內容

下面的CSS對框進行樣式設置,并應用轉換效果,使框的顏色和大小發(fā)生變化,并使框旋轉,同時鼠標光標懸停在該框上。

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

當您運行代碼時應該注意將鼠標光標懸停在框上時會發(fā)生什么,然后將其移開。

還請注意當您單擊該框時出現在JavaScript控制臺中的日志,或者在轉換運行完成之前將光標移開。

規(guī)范

規(guī)范 狀態(tài) 注釋
CSS轉換
該規(guī)范中的'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

公眾號
微信公眾號

編程獅公眾號