Angular 2 动画“无法在‘元素’上执行‘动画’：不支持部分关键帧。”答案

【问题标题】：Angular 2 Animations "Failed to execute 'animate' on 'Element': Partial keyframes are not supported."Angular 2 动画“无法在‘元素’上执行‘动画’：不支持部分关键帧。”
【发布时间】：2017-12-21 15:00:27
【问题描述】：

我创建了以下 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>

在动画发生时，我收到以下错误：

在“元素”上执行“动画”失败：不支持部分关键帧。”

为什么会发生这种情况，我该如何解决？

【问题讨论】：

我已经测试过了，padding-和margin-Property似乎有问题。有没有其他方法可以折叠动画中卡片的内容？
你能发布col-card__content-div、card-block和col-card__contentselector--body的css样式吗？
card-block 来自 bootstrap，col-card__contentselector--body 目前没有样式，col-card__content-div 有以下样式：.col-card__content-div { overflow: hidden; }

标签： angular angular-animations

【解决方案1】：

根据提供的代码，这似乎对我有用（在 Mac 上的 Chrome 59.0.3、Firefox 54.0.1 和 Safari 9 中进行了测试）。请参阅此minimal example on Github，即running live here。这是使用您的代码的card component 和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"

我建议尝试：

如果需要，更新您的动画库
将您的代码与我的示例进行比较以发现差异
发布更多代码、您的项目或minimal, complete, verifiable example，以便我可以帮助您进一步调试:)

【讨论】：