Skip to content
Related Articles

Related Articles

HTML | DOM TransitionEvent
  • Last Updated : 11 Feb, 2019

The creation and completion of a CSS Transition result in a corresponding DOM Event. An event is fired for each property that undergoes a transition which gives the name of the property and the duration for which transition occurs. If the transition is not executed before completion the event will not fire.

Property Values:

  • propertyName: Returns the name of the transition.
  • elapsedTime: Returns the number of seconds a transition has been running.

Event Types:

  • transitionend: The event occurs when a CSS transition has been completed.
  • transitionstart: The event occurs when a CSS transition has started.

Syntax:

  • for transitionend event:
    object.addEventListener("transitionend", myScript);

    Example-1: “transitionend” event






    <!DOCTYPE html>
    <html>
      
    <head>
        <style>
            #myDIV {
                width: 100px;
                height: 100px;
                background: green;
                transition: width 2s;
            }
              
            #myDIV:hover {
                width: 400px;
                height: 400px;
            }
        </style>
    </head>
      
    <body>
        <center>
      
            <div id="myDIV"></div>
      
            <script>
                
                // TransitionEnd Event for SAFARI.
                document.getElementById(
      "myDIV").addEventListener("webkitTransitionEnd", func);
                
                // TransitionEnd Event for other
                // Standard Browsers.
                document.getElementById(
      "myDIV").addEventListener("transitionend", func);
      
                function func() {
                  this.innerHTML = 
                   "transitionend event occured -" 
                  "The transition has completed";
                  this.style.backgroundColor = "lime green";
                }
            </script>
        </center>
    </body>
      
    </html>

    Output:

    Before:

    After:

    Example-2: “TransitionEvent” propertyName property.




    <head>
        <style>
            #myDIV {
                width: 100px;
                height: 100px;
                background: green;
                -webkit-transition: 3s;
                transition: 3s;
            }
              
            #myDIV:hover {
                height: 400px;
      
            }
        </style>
    </head>
      
    <body>
      
        <div id="myDIV"></div>
      
        <script>
            // Code for Safari 3.1 to 6.0
            document.getElementById("myDIV"
             ).addEventListener("webkitTransitionEnd"
                                , myFunction);
      
            // Standard syntax
            document.getElementById("myDIV"
             ).addEventListener("transitionend"
                                , myFunction);
      
            
            function myFunction(event) {
                
                // Property Name
                this.innerHTML = "CSS Property used: "
                + event.propertyName;
            }
        </script>
    </body>
      
    </html>

    Output:

    Before:

    After:

    Supported Browser:

    • Google Chrome-26.0
    • Internet Explorer-10.0
    • Mozilla Firefox-16.0
    • Safari-6.1
    • Opera-12.1

    full-stack-img

    My Personal Notes arrow_drop_up
Recommended Articles
Page :