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

• • Reply
  TheNutCracke...

  Member

  68 Points

  592 Posts

  CSS 3 'transitionend' Event Handler - are the rules suspended or still active in this Event Handl...

  Oct 30, 2016 01:26 AM|TheNutCracker|LINK

  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.

  Windows 7 Ultimate to the death or until Microsoft comes out of their coma.
• • Reply
  Zhi Lv - MSF...

  All-Star

  45489 Points

  7008 Posts

  Microsoft

  Re: CSS 3 'transitionend' Event Handler - are the rules suspended or still active in this Event H...

  Oct 31, 2016 05:56 AM|Zhi Lv - MSFT|LINK

  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

  .NET forums are moving to a new home on Microsoft Q&A, we encourage you to go to Microsoft Q&A for .NET for posting new questions and get involved today.