window屬性：ontransitioncancel

ontransitioncancel屬性

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

在以下情況下，轉(zhuǎn)換被取消：

• 適用于目標(biāo)的transition-property屬性值將更改
• 該display屬性設(shè)置為"none"。
• 轉(zhuǎn)換在運(yùn)行完成之前停止，例如通過(guò)將鼠標(biāo)移出懸停轉(zhuǎn)換元素。

ontransitioncancel屬性語(yǔ)法

var transitionCancelHandler = target.ontransitioncancel;

target.ontransitioncancel = Function

ontransitioncancel屬性值

當(dāng)被調(diào)用transitioncancel事件發(fā)生時(shí)要調(diào)用的Function，指示在target對(duì)象上已取消了 CSS 轉(zhuǎn)換，其中，所述target對(duì)象是一個(gè)HTML元素（HTMLElement），文件（Document），或窗口（Window）。該函數(shù)接收作為輸入的單個(gè)參數(shù)：描述發(fā)生的事件的TransitionEvent對(duì)象；事件的TransitionEvent.elapsedTime屬性值應(yīng)該與transition-duration的值相同。

注意：elapsedTime不包括過(guò)渡效果開(kāi)始之前的時(shí)間；這意味著該transition-delay值不會(huì)影響該elapsedTime值，直到延遲周期結(jié)束并且動(dòng)畫(huà)開(kāi)始，該值才為零。

ontransitioncancel屬性示例

在本例中，我們使用transitionrun和transitionend事件來(lái)檢測(cè)轉(zhuǎn)換何時(shí)開(kāi)始和結(jié)束，以便在轉(zhuǎn)換期間發(fā)生文本更新。這也可以用來(lái)觸發(fā)動(dòng)畫(huà)或其他效果，以允許鏈接反應(yīng)。

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

HTML內(nèi)容

這只是簡(jiǎn)單地創(chuàng)建一個(gè)<div>，我們將用下面的CSS樣式來(lái)制作一個(gè)調(diào)整大小和改變顏色等的框。

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

CSS內(nèi)容

下面的CSS對(duì)框進(jìn)行樣式設(shè)置，并應(yīng)用轉(zhuǎn)換效果，使框的顏色和大小發(fā)生變化，并使框旋轉(zhuǎn)，同時(shí)鼠標(biāo)光標(biāo)懸停在該框上。

.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內(nèi)容

接下來(lái)，我們需要建立事件處理程序，以便在過(guò)渡開(kāi)始和結(jié)束時(shí)更改框的文本內(nèi)容。

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

當(dāng)您運(yùn)行代碼時(shí)應(yīng)該注意將鼠標(biāo)光標(biāo)懸停在框上時(shí)會(huì)發(fā)生什么，然后將其移開(kāi)。

還請(qǐng)注意當(dāng)您單擊該框時(shí)出現(xiàn)在JavaScript控制臺(tái)中的日志，或者在轉(zhuǎn)換運(yùn)行完成之前將光標(biāo)移開(kāi)。

規(guī)范

瀏覽器兼容性

我們正在將兼容性數(shù)據(jù)轉(zhuǎn)換為機(jī)器可讀的JSON格式。

• 電腦端

• 移動(dòng)端