Cette page vous a-t-elle été utile ?
Votre avis sur ce contenu est important. N'hésitez pas à nous faire part de vos commentaires.
Vous avez d'autres commentaires ?
1500 caractères restants
Exporter (0) Imprimer
Développer tout
EN
Ce contenu n’est pas disponible dans votre langue. Voici la version anglaise.

transionstart event

The transitionstart event occurs at the beginning of the transition.

Syntax

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

 

Event information

SynchronousNo
BubblesYes
CancelableYes

 

Event handler parameters

handler [in]

Type: function

Event handler object.

Remarks

These events were introduced in Internet Explorer 10. This event is only available in Windows Internet Explorer currently, and is not in the W3C spec.

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:
© 2015 Microsoft