Exporter (0) Imprimer
Développer tout
EN
Ce contenu n’est pas disponible dans votre langue. Voici la version anglaise.

transionend event

The transitionend event occurs at the completion of the transition. If the transition is removed before completion, the event will not fire.

CSS Transitions Module Level 3

 

Syntax

addEventListener Method object.addEventListener("transionend", handler, useCapture)

 

Event information

SynchronousNo
BubblesYes
CancelableYes

 

Event handler parameters

handler [in]

Type: function

Event handler object.

Standards information

Remarks

These events were introduced in Internet Explorer 10.

As of Internet Explorer for Windows Phone 8.1 Update, Internet Explorer for Windows Phone supports "webkitTransitionEnd" as an alias for this property.

Examples

This example applies transitions to a <div> element, and fires the transitionstart and transitionend events to change the text in the box. Try the example online.


<!DOCTYPE html>
<html>

<head>
<title>CSS Transitions Event Example</title>
<style media="screen" type="text/css">
#animatedDiv {
    opacity: 0.5;
    background-color: #D2D2D2;
    color: black;
  width:100px;
  height:100px;
}
#animatedDiv:hover {
    opacity: 1;
    background-color: #F472D0;
    transform: rotate(45deg) translateX(200px);
    transition: all 5s linear 1s;
}
  #Figure {
  border: solid 1px black;
  }
</style>
</head>

<body>

<h1 id="DemoTitle">CSS transition events example</h1>
  <p>Hover your mouse over the inner box</p>
<div class="FigureContainer Bordered">
    <div id="Figure" style="width: 330px; height: 300px;">
        <div id="animatedDiv" aria-haspopup="true">
            Transitioned Element</div>
    </div>
</div>

    <script>
      var divObj = document.getElementById("animatedDiv");
      divObj.addEventListener("transitionstart", function () {
        this.innerHTML = "This is a transition start event";
      }, false);
      divObj.addEventListener("transitionend", function () {
        this.innerHTML = "This is a transition end event";
      }, false);

    </script>

</body>

</html>


See also

transitionEvent

 

 

Afficher:
© 2014 Microsoft