无法执行 angular 动画：不支持部分关键帧

Question

我刚开始使用 Angular 动画，但一直卡在那个错误上：

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

我试过 google 但没有成功。

这是我的代码：

app.component.ts:

import { Component } from '@angular/core';
import { trigger, state, style, transition, animate } from '@angular/animations';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
  animations: [
    trigger('square', [
      state('normal', style({
        background: 'transparent',
        border: '2px solid black',
        borderRadius : '0px'
      })),
      state('wild', style({
        background: 'red',
        border: 'Opx',
        borderRadius:'100px'
      })),
      transition('normal => wild', animate(300))
    ])
  ]
})
export class AppComponent {
  public currentState: string = "wild";
}

我的app.component.html:

<div class="container-fluid">
  <div class="row">
    <button class="btn btn-secondary col-1 mx-auto" (click) = "currentState='normal'"> normal </button>
    <button class="btn btn-primary col-1 mx-auto" (click) = "currentState='wild'"> wild </button>
    <!--<button class="btn btn-success col-1 mx-auto"> 3 </button>
    <button class="btn btn-danger col-1 mx-auto"> 4 </button>-->

  </div>
  <div class="row">
    <div [@square] ="currentState" class="square mx-auto"></div>
  </div>
</div>

感谢您的帮助！

Answer 1

看来问题出在我的 border: 0px CSS 属性处于第二个状态。我用 "none" 替换了它并且有效

Answer 2

与您个人的回答相反。您没有零像素属性。如果您阅读了原始问题，它实际上说的是 Capital-Oh Pixels Opx。但同样的原则也适用。如果您的代码中有错误或拼写错误，它就会崩溃。有时以奇怪的方式。零像素 0px 就可以了。

Answer 3

'Partial Keyframes are not supported' 错误主要发生在您在编写动画函数时拼错某些内容时。

在上述情况下，您在第二种状态下拼错了 'border' 属性值。

border 属性需要像 0、1、2 这样的数字。但是在上面的代码中，您使用了字符 'O' 而不是 '0'。一旦将 'O' 替换为实际的零“0”，它将正常工作。

Answer 4

如果您的 CSS 值的单位被省略，也会出现此错误。例如：

trigger('rotate180', [
    transition(':enter', [
        style({ transform: 'rotate(180)' }), // Doesn't Work!
        animate('0.6s 1.4s cubic-bezier(0.65, 0, 0.35, 1)')
    ]),
    state('*', style({ transform: '*' })),
]),

会抛出错误。样式应为：

{ transform: 'rotate(180deg)' } // Works!

无法执行 angular 动画：不支持部分关键帧

Failed to execute angular animate : Partial keyframes are not supported

angular

angular-animations