Angular 2 Animations "Failed to execute 'animate' on 'Element': Partial keyframes are not supported."

Question

I've created the following Angular 2 animation:

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'))
  ])

This animation should slide in / out the following HTML content:

<div>
 <div class="col-card__content-div">
  <div [@detailsContentAnimation]="areDetailsVisible" class="card-block">
    <ng-content select=".col-card__contentselector--body"></ng-content>
  </div>
</div>

While the animation is occuring, I get the following error:

Failed to execute 'animate' on 'Element': Partial keyframes are not supported."

Why is this happening and how can I fix it?

Answer 1

Based on the code provided this seems to work for me (tested in Chrome 59.0.3, Firefox 54.0.1, and Safari 9, all on Mac). See this minimal example on Github which is running live here. Here is a direct link to the card component and card template which use your code. I tried but was unable to reproduce your error.

My versions:

"@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"

I suggest trying to:

1. Update your animations library if needed
2. Compare your code to my example to spot the difference
3. Post more code, your project, or a minimal, complete, verifiable example so I can help you debug further :)