AnimationStart event not firing in IE11

Question

I am trying to detect when a new element with a particular CSS class is added to the DOM. I originally hit upon OnDOMNodeInserted (which proved to be too slow to use in production) and Mutation Observers, which did not work in all browsers. I was able to find a workable solution using CSS animations, starting with this blog post:

http://www.backalleycoder.com/2012/04/25/i-want-a-damnodeinserted/

I have implemented this and it's working in every browser, except IE (it seems like I've been saying "it works in every browser but IE" since I started web development more than a decade ago, but that's another story). This fiddle -- which works beautifully in every other browser -- distills what I'm trying to do down to a simple form:

https://jsfiddle.net/Lued2cLk/15/

Basically the idea is that anything with the 'requiresFeature' CSS class will be hidden by default, and only shown if the feature is enabled. If the feature is enabled and the element is added, it should show up. The "Add dynamic element" link in that fiddle adds a new element with this CSS class to the DOM.

The 'requiresFeature' class implements a short animation (that doesn't actually animate anything) called 'nodeInserted', and we have document level event listeners waiting for an animation to start:

 var event = function(e) {
    //alert('anim fired');
    if (e.animationName == 'nodeInserted') {
      T.WGE(T.WGE());
    }
  }

  document.addEventListener('animationstart', event, false);
  document.addEventListener('MSAnimationStart', event, false);
  document.addEventListener('webkitAnimationStart', event, false);

Under no circumstances in IE11 is the animationstart event firing. Originally I thought it might be a problem with the 'visibility: hidden' property (I found out that 'display:none' in the CSS class will prevent the animation from firing in all browsers), but removing it has no effect, the animationstart event does not fire.

The example in the blog post I linked above works fine in IE11, but no matter how I poke at it I can't get my fiddle working in IE11. Anyone have any thoughts?

Just to explain a bit about the fiddle, the T.WGE method toggles the feature (WorkGroup Enabled) on or off based on the boolean passed in. If I explicitly turn the feature on (even if it's already on) in IE11, all the dynamic span's appear. But at no point no matter what state it's in does the animationstart even fire.

The easiest way to see my problem in action is to click "Turn Feature On", then click "Add dynamic Element". What should happen is a new span with "This will only appear in WG are enabled" should appear and be set to visible, but what actually happens is the span is added but the trigger to make it visible never runs.

Answer 1

Somehow posting my question on StackOverflow always seems to lead me to the solution.

It appears that IE was able to detect that my animation wasn't doing anything and was optimizing it away. By adding anything which would trigger an actual animation (even if the styles changed do not actually change anything in the display) I was able to get events to fire.

I changed the CSS in my original fiddle to this and it worked:

@keyframes nodeInserted {  
    from {  
        outline-color: #fff; 
    }
    to {  
        outline-color: #000;
    } 
}

@-moz-keyframes nodeInserted {  
    from {  
        outline-color: #fff; 
    }
    to {  
        outline-color: #000;
    } 
}

@-webkit-keyframes nodeInserted {  
    from {  
        outline-color: #fff; 
    }
    to {  
        outline-color: #000;
    } 
}

@-ms-keyframes nodeInserted {  
  from {  
        outline-color: #fff; 
    }
    to {  
        outline-color: #000;
    } 
}

@-o-keyframes nodeInserted {  
   from {  
        outline-color: #fff; 
    }
    to {  
        outline-color: #000;
    } 
}