window屬性：ontransitionend

ontransitionend屬性

transitionend事件的事件處理程序。此事件在CSS轉(zhuǎn)換完成時發(fā)送到。

如果在轉(zhuǎn)換完成執(zhí)行之前從其目標(biāo)節(jié)點(diǎn)刪除轉(zhuǎn)換，則不會生成該transitionend事件。一種可能發(fā)生的方式是改變適用于目標(biāo)的transition-property屬性值。另一種情況是，display屬性設(shè)置為"none"。

ontransitionend屬性語法

var transitionEndHandler = target.ontransitionend;

target.ontransitionend = Function

ontransitionend屬性值

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

elapsedTime不包括過渡效果開始之前的時間；這意味著該transition-delay值不會影響該elapsedTime值，直到延遲期結(jié)束并且動畫開始，該值才為零。

ontransitionend屬性示例

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

HTML內(nèi)容

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

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

CSS內(nèi)容

下面的CSS對框進(jìn)行樣式設(shè)置，并應(yīng)用轉(zhuǎn)換效果，使框的顏色和大小發(fā)生變化，并使框旋轉(zhuǎn)，同時鼠標(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)容

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

let box = document.querySelector(".box");
box.ontransitionrun = function(event) {
  box.innerHTML = "Zooming...";
} 
box.ontransitionend = function(event) {
  box.innerHTML = "Done!";
}

注意將鼠標(biāo)光標(biāo)懸停在框上時會發(fā)生什么，然后將其移開。

規(guī)范

瀏覽器兼容性

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

• 電腦端

• 移動端

注釋：

[1] Chrome調(diào)用onwebkittransitionend事件處理程序，事件的前綴為webkittransitionend。

[2]這個事件處理程序的HTML屬性不可用，但可以用addEventListener()函數(shù)來監(jiān)聽transitionend事件。