🐞 bug报告
受影响的软件包
这个问题是由 @angular/animations 包引起的。
是否为回归？
我不确定。
描述
给定以下动画，用于展开元素：
animate(300, style({
height: '!'
}))当使用 AnimationBuilder 消费它并尝试使用 AnimationPlayer 运行它时(在使用状态和过渡触发器时表现得非常好),它会失败。
🔬 最小复现
https://stackblitz.com/edit/angular-issue-repro2-3gdmsb?file=src%2Fapp%2Fapp.component.html
🔥 异常或错误
Invalid keyframe value for property height: undefined.
ERROR DOMException: Failed to execute 'animate' on 'Element': Partial keyframes are not supported.
at WebAnimationsPlayer._triggerWebAnimation🌍 你的环境中...
Angular 版本：
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
2条答案
按热度按时间vmjh9lq91#
"
height: '!'"应该做什么？这看起来不像一个有效的CSS变量。zyfwsgd62#
"
height: '!'"应该做什么？这看起来不像一个有效的CSS变量。@StefanKern
不，它不是一个普通的CSS有效值。
据我所知，它应该告诉Angular计算元素最终的高度(因为涉及到动态内容，我们无法在运行前知道那个高度)。
如果你查看stackblitz上的复现示例，那里的3个示例都使用了
height: '!'。当使用触发器(列
#1)时，它工作得非常好，但在使用AnimationBuilder/AnimationPlayer(列#2和#3)时却不起作用。