Problem: CSS animation is throwing off child component (containing html5 canvas) mouse event offsets. Solution: I need to fire an event when a CSS transition has finished.

given:

div{
    -webkit-transition: margin-left 0.3s ease-in-out;
    -moz-transition: margin-left 0.3s ease-in-out;
    -o-transition: margin-left 0.3s ease-in-out;
    transition: margin-left 0.3s ease-in-out;
    &.animate{
         margin-left: 3rem;
    }
}

i can detect when a CSS transition has been completed by:

whichTransitionEvent(){
    var t;
    var el = document.createElement('fakeelement');
    var transitions = {
      'transition':'transitionend',
      'OTransition':'oTransitionEnd',
      'MozTransition':'transitionend',
      'WebkitTransition':'webkitTransitionEnd'
    }

    for(t in transitions){
        if( el.style[t] !== undefined ){
            return transitions[t];
        }
    }
  }

  theFunctionToInvoke(){
  }

  listenForAnimationToFinish(){
    const transitionEnd = this.whichTransitionEvent();
    this.drawerContainer.nativeElement.addEventListener(transitionEnd, this.theFunctionToInvoke, false);
  }

The problem with this solution is that transitionend is not fired on the initial loading of the page. I could also add a timeout on ngAfterViewInit and wait ~300m but that isn't very elegant.

My theory for the root cause is that Javascript Mouse Events is updated when CSS transition events are fired.

Sources:

• https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/transitionend_event
• Wait for css transition