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?

I've tested it and there seems to be a problem with the padding- and margin-Property. Is there another way to collapse the content of the card in the animation? — Thomas Gassmann, Jul 17 '17 at 14:39
Could you post the css styles for `col-card__content-div`, `card-block`, and `col-card__contentselector--body`? — SpaceFozzy, Jul 20 '17 at 01:41
`card-block` is from bootstrap, `col-card__contentselector--body` currently has no style and `col-card__content-div` has the following style: `.col-card__content-div { overflow: hidden; }` — Thomas Gassmann, Jul 20 '17 at 06:07

score 3 · Accepted Answer · answered Jul 22 '17 at 03:38

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:

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

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

1 Answers1