ForEveryNode and Injector

foreverynode_injector_es6.js

var injector = {
  inject: function(alias, css) {
    var head = document.head || document.getElementsByTagName('head')[0]
      , style = document.createElement('style');
    style.type = 'text/css';
    style.id = 'injector:' + alias;
    if (style.styleSheet) {
      style.styleSheet.cssText = css;
    } else {
      style.appendChild(document.createTextNode(css));
    }
    head.appendChild(style);
  },
  remove: function(alias) {
    var style = document.getElementById('injector:' + alias);
    if(style) {
      var head = document.head || document.getElementsByTagName('head')[0];
      if(head)
        head.removeChild(document.getElementById('injector:' + alias));
    }
  }
}

function forEveryNode(selector, callback, identifier, classOnDone) {
  identifier = 'FEN_'+identifier
  let css = '', rule = ''
  ;['', '-moz-', '-webkit-', '-ms-', '-o-'].forEach(prefix => {
    if(prefix == '-ms-') {
      css += `
      @${prefix}keyframes ${identifier} {  
        from { opacity: 0.999; }
        to { opacity: 1; }
      }`
    }
    else {
      css += `
      @${prefix}keyframes ${identifier} {  
        from { clip: rect(1px, auto, auto, auto); }
        to { clip: rect(0px, auto, auto, auto); }  
      }`
    }
    rule += `
    ${prefix}animation-duration: 0.001s;
    ${prefix}animation-name: ${identifier};
    `
  })
  css += `${selector} {${rule}}`

  ;['animationstart', 'webkitAnimationStart', 'MSAnimationStart', 'oanimationstart'].forEach(evType => {
    document.addEventListener(evType, function(ev) {
      if(ev.animationName == identifier && !ev.target.classList.contains(classOnDone)) {
        callback(ev.target)
        ev.target.classList.add(classOnDone)
      }
    })
  })

  injector.inject(identifier, css)
}