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

Question

I 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 embed / output 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 happening, I get the following error:

Failed to execute 'animate' in 'Element': partial keyframes are not supported.

Why is this happening and how can I fix it?

Answer 1

, , , ( Chrome 59.0.3, Firefox 54.0.1 Safari 9, Mac). . Github, . . , .

:

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

:

• ,
• , , , , :)