CSS 3 'transitionend' Event Handler - are the rules suspended or still active in this Event Handler? If active, How is it avoiding infinite loops?

Question

User-1851576699 posted

I am learning about CSS3 transitions and you can set an event handler called 'transitionend' on elements that use transitions. My question is whether or not the 'transitionend' event handler is capable of triggering itself as a result of changing either 1) the same style property of the element that triggered the event or 2) a different style property that also is being monitored for transitions. For example, if I do:

#div1 {

transition: background-color 3s, color 3s;

}

div1.addEventListener('transitionend', function(e, f, g) { div1.style.backgroundColor = "black";} );

Does the 'transitionend' event handler get triggered again from the 'backgroundColor' property change in the 'transitionend' event handler or are transition rules simply ignored in the 'transitionend' event handler? I could see the potential for an infinite loop if the transition rules aren't ignored in the event handler.

***EDIT***: I guess I could see an infinite loop being prevented if the value of the property being assigned to in the 'transitionend' event handler doesn't change. Still, if that's what stops the infinite loop it seems a bit shaky.

Answer 1

User-271186128 posted

Hi TheNutCracker,

With reference to the document, we can know that: The transitionend event occurs when a CSS transition has completed.

So, every time the transition is occurs, it will trigger this event.

If you want to restore the css style, I suggest you could refer to the following code:

    <style>
        #myDIV {
            width: 100px;
            height: 100px;
            background: red;
            -webkit-transition: width 2s; /* For Safari 3.1 to 6.0 */
            transition: width 2s;
        }

            #myDIV:hover {
                width: 400px;
            }
    </style>


    <p>Hover over the div element below, and wait for the transition effect to end.</p>

    <div id="myDIV"></div>

    <p><b>Note:</b> This example does not work in Internet Explorer 9 and earlier versions.</p>

    <script>
        // Code for Safari 3.1 to 6.0
        document.getElementById("myDIV").addEventListener("webkitTransitionEnd", myFunction);

        // Standard syntax
        document.getElementById("myDIV").addEventListener("transitionend", myFunction);
        var flag = true;
        function myFunction() {
            if (flag) {
                this.innerHTML = "transitionend event occured - The transition has completed";
                this.style.backgroundColor = "pink";
                flag = false;
            }
            else {
                this.innerHTML = "transitionend event occured - restore";
                this.style.backgroundColor = "red";
                flag = true;
            }

        }
    </script>

The screenshot:

Besides, if you want to prevent the transitionend event, you could try to remove the CSS transition-property property.

More details, see:

http://www.w3schools.com/jsref/event_transitionend.asp

http://www.w3schools.com/css/css3_transitions.asp

Best regards,
Dillion