EN
이 콘텐츠는 한국어로 제공되지 않아 영어 버전으로 표시됩니다.

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

 

 

표시:
© 2015 Microsoft