diff --git a/docs/animations-demo-inner/dist/bundle.js b/docs/animations-demo-inner/dist/bundle.js index 604d1bf18..9d0e432d9 100644 --- a/docs/animations-demo-inner/dist/bundle.js +++ b/docs/animations-demo-inner/dist/bundle.js @@ -1 +1 @@ -!function(){"use strict";function e(e,t){e.prototype=Object.create(t.prototype),e.prototype.constructor=e,n(e,t)}function n(e,t){return n=Object.setPrototypeOf||function(e,n){return e.__proto__=n,e},n(e,t)}!function(){var n=Inferno.Component,t=Inferno.createElement,r=Inferno.createRef,o=Inferno.Animation;o.AnimatedComponent;var i=o.componentDidAppear,p=o.componentWillDisappear,s=o.utils;s.addClassName,s.removeClassName,s.forceReflow,s.registerTransitionListener;var a=function(n){function r(){return n.apply(this,arguments)||this}e(r,n);var o=r.prototype;return o.componentDidAppear=function(e){this._innerEl=this.props.innerRef.current,i(this._innerEl,{prefix:"inner"})},o.componentWillDisappear=function(e,n){p(this._innerEl,{prefix:"inner"},n)},o.render=function(){var e=this;return t("div",{className:"page"},t("div",{className:"random-wrapper"},[t("img",{width:"120px",height:"120px",src:"avatar.png"}),t("div",{ref:this.props.innerRef,className:"inner"},[t("h2",null,"Step "+this.props.step),t("button",{onClick:function(n){n.preventDefault(),e.props.onNext()}},"Next")])]))},r}(n),c=function(n){function o(){var e;(e=n.call(this)||this).doGoNext=function(){e.setState({showStepIndex:(e.state.showStepIndex+1)%3})},e._innerAnimRefs=[];for(var t=0;t<3;t++)e._innerAnimRefs.push(r());return e.state={showStepIndex:0},e}return e(o,n),o.prototype.render=function(){var e=this.state.showStepIndex;return t(a,{key:"page_"+e,step:e+1,innerRef:this._innerAnimRefs[e],onNext:this.doGoNext})},o}(n);document.addEventListener("DOMContentLoaded",(function(){var e=document.querySelector("#App1");Inferno.render(t(c),e)}))}()}(); +!function(){"use strict";function e(e,t){e.prototype=Object.create(t.prototype),e.prototype.constructor=e,n(e,t)}function n(e,t){return n=Object.setPrototypeOf||function(e,n){return e.__proto__=n,e},n(e,t)}!function(){var n=Inferno.Component,t=Inferno.createElement,r=Inferno.createRef,o=Inferno.Animation;o.AnimatedComponent;var i=o.componentDidAppear,p=o.componentWillDisappear,a=o.utils;a.addClassName,a.removeClassName,a.forceReflow,a.registerTransitionListener;var s=function(n){function r(){return n.apply(this,arguments)||this}e(r,n);var o=r.prototype;return o.componentDidAppear=function(e){this._innerEl=this.props.innerRef.current,i(this._innerEl,{animation:"inner"})},o.componentWillDisappear=function(e,n){p(this._innerEl,{animation:"inner"},n)},o.render=function(){var e=this;return t("div",{className:"page"},t("div",{className:"random-wrapper"},[t("h3",null,"Page "+this.props.step),t("img",{width:"120px",height:"120px",src:"avatar.png"}),t("p",null,"The entire page is swapped, but we are only animating div.inner. This gives the apperance of only swapping the box below."),t("p",null,"In order not to hide the incoming content we can't set background on div.page. The background needs to be provided by a backdrop in the wizard component."),t("div",{ref:this.props.innerRef,className:"inner"},[t("h2",null,"Step "+this.props.step),t("button",{onClick:function(n){n.preventDefault(),e.props.onNext()}},"Next")])]))},r}(n),c=function(n){function o(){var e;(e=n.call(this)||this).doGoNext=function(){e.setState({showStepIndex:(e.state.showStepIndex+1)%3})},e._innerAnimRefs=[];for(var t=0;t<3;t++)e._innerAnimRefs.push(r());return e.state={showStepIndex:0},e}return e(o,n),o.prototype.render=function(){var e=this.state.showStepIndex;return t(s,{key:"page_"+e,step:e+1,innerRef:this._innerAnimRefs[e],onNext:this.doGoNext})},o}(n);document.addEventListener("DOMContentLoaded",(function(){var e=document.querySelector("#App1");Inferno.render(t(c),e)}))}()}(); diff --git a/packages/inferno-animation/src/animationCoordinator.ts b/packages/inferno-animation/src/animationCoordinator.ts index 0f4c8418c..d2b6ad4b8 100644 --- a/packages/inferno-animation/src/animationCoordinator.ts +++ b/packages/inferno-animation/src/animationCoordinator.ts @@ -53,16 +53,18 @@ function _runAnimationPhases() { switch (phase) { case AnimationPhase.ACTIVATE_ANIMATION: // Final phase - Activate animations + // This is a special case and is executed differently from others _animationActivationQueue = _animationActivationQueue.concat(animationQueue); if (_nextActivateAnimationFrame === IDLE) { // Animations are activated on the next animation frame _nextActivateAnimationFrame = requestAnimationFrame(_runActivateAnimationPhase); } break; - case AnimationPhase.ACTIVATE_TRANSITIONS: - // Force reflow before executing ACTIVATE_TRANSITIONS - forceReflow(); default: + if (phase === AnimationPhase.ACTIVATE_TRANSITIONS) { + // Force reflow before executing ACTIVATE_TRANSITIONS + forceReflow(); + } for (let j = 0; j < animationQueue.length; j++) { animationQueue[j](phase); } @@ -80,16 +82,18 @@ function _debugAnimationPhases(phase: AnimationPhase, animationQueue) { switch (phase) { case AnimationPhase.ACTIVATE_ANIMATION: // Final phase - Activate animations + // This is a special case and is executed differently from others _animationActivationQueue = _animationActivationQueue.concat(animationQueue); if (_nextActivateAnimationFrame === IDLE) { // Animations are activated on the next animation frame _nextActivateAnimationFrame = requestAnimationFrame(_runActivateAnimationPhase); } break; - case AnimationPhase.ACTIVATE_TRANSITIONS: - // Force reflow before executing ACTIVATE_TRANSITIONS - forceReflow(); default: + if (phase === AnimationPhase.ACTIVATE_TRANSITIONS) { + // Force reflow before executing ACTIVATE_TRANSITIONS + forceReflow(); + } for (let j = 0; j < animationQueue.length; j++) { animationQueue[j](phase); } diff --git a/packages/inferno-animation/src/animations.ts b/packages/inferno-animation/src/animations.ts index 488f3ddf6..b9b7e18d1 100644 --- a/packages/inferno-animation/src/animations.ts +++ b/packages/inferno-animation/src/animations.ts @@ -96,6 +96,7 @@ function _didAppear(phase: AnimationPhase, dom: HTMLElement, cls: AnimationClass [dom], _getDidAppearTransitionCallback(dom, cls) ); + return; case AnimationPhase.ACTIVATE_ANIMATION: // 4. Activate target state (called async via requestAnimationFrame) setDimensions(dom, dimensions.width, dimensions.height); @@ -133,11 +134,13 @@ function _willDisappear(phase: AnimationPhase, dom: HTMLElement, callback: Funct [dom], callback ); + return; case AnimationPhase.ACTIVATE_ANIMATION: // 4. Activate target state (called async via requestAnimationFrame) addClassName(dom, cls.end); removeClassName(dom, cls.start); clearDimensions(dom); + return; } } @@ -254,6 +257,7 @@ function _willMove(phase: AnimationPhase, cls: AnimationClass, animState) { } // TODO: Set dimensions if (parentVNode.$MV) parentVNode.$MV = false; + return; } }