Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Hotfix performance bug inferno animation #1576

Merged
merged 3 commits into from Oct 25, 2021
Merged

Hotfix performance bug inferno animation #1576

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
505d024
Fixed bug where AnimationPhase.ACTIVATE_ANIMATION ws run twice due to…
jhsware Oct 25, 2021
f1490a5
Change to make code more readable
jhsware Oct 25, 2021
4014862
Docs bundle
jhsware Oct 25, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
2 changes: 1 addition & 1 deletion docs/animations-demo-inner/dist/bundle.js
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

16 changes: 10 additions & 6 deletions packages/inferno-animation/src/animationCoordinator.ts
View file
Open in desktop
Expand Up @@ -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);
}
Expand All @@ -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);
}
Expand Down
4 changes: 4 additions & 0 deletions packages/inferno-animation/src/animations.ts
View file
Open in desktop
Expand Up @@ -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);
Expand Down Expand Up @@ -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;
}
}

Expand Down Expand Up @@ -254,6 +257,7 @@ function _willMove(phase: AnimationPhase, cls: AnimationClass, animState) {
}
// TODO: Set dimensions
if (parentVNode.$MV) parentVNode.$MV = false;
return;
}
}

Expand Down