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.

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

Already on GitHub? Sign in to your account

Animation: Automatic property calculation ('!') not working when using AnimationPlayer/AnimationBuilder #28002

Open
MrCroft opened this issue Jan 9, 2019 · 2 comments
Labels
area: animations freq3: high P3 An issue that is relevant to core functions, but does not impede progress. Important, but not urgent type: bug/fix
Milestone

Comments

@MrCroft
Copy link

MrCroft commented Jan 9, 2019

馃悶 bug report

Affected Package

The issue is caused by package: @angular/animations

Is this a regression?

I'm not sure

Description

Given the following animation, for expanding an element:

animate(300, style({
    height: '!'
}))

it fails when consuming it with AnimationBuilder and trying to run it using AnimationPlayer (while it works perfectly fine using triggers with state & transition).

馃敩 Minimal Reproduction

https://stackblitz.com/edit/angular-issue-repro2-3gdmsb?file=src%2Fapp%2Fapp.component.html

馃敟 Exception or Error


Invalid keyframe value for property height: undefined.

ERROR DOMException: Failed to execute 'animate' on 'Element': Partial keyframes are not supported.
    at WebAnimationsPlayer._triggerWebAnimation

馃實 Your Environment

Angular Version:


Angular CLI: 7.2.0
Node: 10.15.0
OS: win32 x64
Angular: 7.2.0
... animations, common, compiler, compiler-cli, core, forms
... language-service, platform-browser, platform-browser-dynamic
... router

Package                           Version
-----------------------------------------------------------
@angular-devkit/architect         0.12.0
@angular-devkit/build-angular     0.12.0
@angular-devkit/build-optimizer   0.12.0
@angular-devkit/build-webpack     0.12.0
@angular-devkit/core              7.2.0
@angular-devkit/schematics        7.2.0
@angular/cli                      7.2.0
@ngtools/webpack                  7.2.0
@schematics/angular               7.2.0
@schematics/update                0.12.0
rxjs                              6.3.3
typescript                        3.1.6
@MrCroft MrCroft changed the title Animation: Automatic property calculation not working when using AnimationPlayer/AnimationBuilder Animation: Automatic property calculation ('!') not working when using AnimationPlayer/AnimationBuilder Jan 9, 2019
@StefanKern
Copy link

What should "height: '!'" do? This doesn't look like a valid css variable.

@MrCroft
Copy link
Author

MrCroft commented Jan 9, 2019

What should "height: '!'" do? This doesn't look like a valid css variable.

@StefanKern
No, it's not a plain old css valid value.
As far as I know it should tell Angular to compute what final height the element will have (since dynamic content is involved, we can't know that height before runtime).
If you check out the repro on stackblitz, All 3 examples there make use of height: '!'.
And it is working perfectly fine when using trigger (column #1), but not when using the AnimationBuilder/AnimationPlayer (columns #2 and #3).

@ngbot ngbot bot added this to the needsTriage milestone Jan 9, 2019
@ngbot ngbot bot modified the milestones: needsTriage, Backlog Jan 10, 2019
@jelbourn jelbourn added P3 An issue that is relevant to core functions, but does not impede progress. Important, but not urgent and removed severity3: broken labels Oct 1, 2020
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
area: animations freq3: high P3 An issue that is relevant to core functions, but does not impede progress. Important, but not urgent type: bug/fix
Projects
None yet
Development

No branches or pull requests

5 participants