Angular 2 个动画 "Failed to execute 'animate' on 'Element': Partial keyframes are not supported."
Angular 2 Animations "Failed to execute 'animate' on 'Element': Partial keyframes are not supported."
我创建了以下 Angular 2 个动画:
trigger('detailsContentAnimation',
[
state('1', style(
{
'height': '*',
'padding-top': '*',
'padding-bottom': '*'
})),
state('0', style(
{
'height': 0,
'padding-top': 0,
'padding-bottom': 0
})),
transition('* => *', animate('400ms ease-out'))
])
此动画应滑入/滑出以下 HTML 内容:
<div>
<div class="col-card__content-div">
<div [@detailsContentAnimation]="areDetailsVisible" class="card-block">
<ng-content select=".col-card__contentselector--body"></ng-content>
</div>
</div>
在播放动画时,出现以下错误:
Failed to execute 'animate' on 'Element': Partial keyframes are not supported."
为什么会发生这种情况,我该如何解决?
根据提供的代码,这似乎对我有用(在 Chrome 59.0.3、Firefox 54.0.1 和 Safari 9 中测试,全部在 Mac 上)。
请参阅使用您的代码的 minimal example on Github which is running live here. Here is a direct link to the card component and card template。我试过了,但无法重现您的错误。
我的版本:
"@angular/animations": "^4.3.1",
"@angular/common": "^4.0.0",
"@angular/compiler": "^4.0.0",
"@angular/core": "^4.0.0",
"@angular/forms": "^4.0.0",
"@angular/http": "^4.0.0",
"@angular/platform-browser": "^4.0.0",
"@angular/platform-browser-dynamic": "^4.0.0",
"@angular/router": "^4.0.0"
我建议尝试:
- 根据需要更新您的动画库
- 将您的代码与我的示例进行比较,找出不同之处
- Post 更多代码、您的项目或 minimal, complete, verifiable example 以便我可以帮助您进一步调试 :)
我创建了以下 Angular 2 个动画:
trigger('detailsContentAnimation',
[
state('1', style(
{
'height': '*',
'padding-top': '*',
'padding-bottom': '*'
})),
state('0', style(
{
'height': 0,
'padding-top': 0,
'padding-bottom': 0
})),
transition('* => *', animate('400ms ease-out'))
])
此动画应滑入/滑出以下 HTML 内容:
<div>
<div class="col-card__content-div">
<div [@detailsContentAnimation]="areDetailsVisible" class="card-block">
<ng-content select=".col-card__contentselector--body"></ng-content>
</div>
</div>
在播放动画时,出现以下错误:
Failed to execute 'animate' on 'Element': Partial keyframes are not supported."
为什么会发生这种情况,我该如何解决?
根据提供的代码,这似乎对我有用(在 Chrome 59.0.3、Firefox 54.0.1 和 Safari 9 中测试,全部在 Mac 上)。 请参阅使用您的代码的 minimal example on Github which is running live here. Here is a direct link to the card component and card template。我试过了,但无法重现您的错误。
我的版本:
"@angular/animations": "^4.3.1",
"@angular/common": "^4.0.0",
"@angular/compiler": "^4.0.0",
"@angular/core": "^4.0.0",
"@angular/forms": "^4.0.0",
"@angular/http": "^4.0.0",
"@angular/platform-browser": "^4.0.0",
"@angular/platform-browser-dynamic": "^4.0.0",
"@angular/router": "^4.0.0"
我建议尝试:
- 根据需要更新您的动画库
- 将您的代码与我的示例进行比较,找出不同之处
- Post 更多代码、您的项目或 minimal, complete, verifiable example 以便我可以帮助您进一步调试 :)