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
– Thomas Gassmann, Commented Jul 17, 2017 at 14:39
Could you post the css styles for col-card__content-div, card-block, and col-card__contentselector--body? — SpaceFozzy
– SpaceFozzy, Commented Jul 20, 2017 at 1: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
– Thomas Gassmann, Commented Jul 20, 2017 at 6:07

SpaceFozzy · Accepted Answer · 2017-07-22 03:38:49Z

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 :)

Collectives™ on Stack Overflow

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

1 Answer 1

Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Related