two-state-icons_04_script-1.js

(function() {
  function TransitionIcon( element ) {
    this.element = element;
    this.size = this.element.getBoundingClientRect();
    this.states = this.element.querySelectorAll('.js-transition-icon__state');
    this.time = {start: null, total: 200};
    this.status = {interacted : false, animating : false};
    this.init();
  };

  TransitionIcon.prototype.init = function() {
    var self = this;
    this.element.addEventListener('click', function(){
      if(self.status.animating) return;
      self.status.animating = true;
      window.requestAnimationFrame(self.triggerAnimation.bind(self));
    });
  };
  
  TransitionIcon.prototype.triggerAnimation = function(timestamp) {
    //.. this is where the animation takes place
  };

  var transitionIcons = document.querySelectorAll('.js-transition-icon');
  if( transitionIcons ) {
    for( var i = 0; transitionIcons.length > i; i++ ) {
      //create a TransitionIcon object for each .js-transition-icon element
      (function(i) {
        new TransitionIcon(transitionIcons[i]);
      }(i));
    }
  }
}());