Problema: la animación CSS está eliminando las compensaciones de eventos del mouse del componente secundario (que contiene lienzo html5). Solución: necesito activar un evento cuando finalice una transición de CSS.
dado:
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; } }Puedo detectar cuándo se ha completado una transición de CSS mediante:
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); }El problema con esta solución es que la transición final no se activa en la carga inicial de la página. También podría agregar un tiempo de espera en ngAfterViewInit y esperar ~ 300 m, pero eso no es muy elegante.
Mi teoría de la causa raíz es que Javascript Mouse Events se actualiza cuando se activan los eventos de transición de CSS.
Fuentes: