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

Question

我开始使用Angular动画，并且我坚持这个错误：

  

错误DOMException：无法执行＆＃39; animate＆＃39; on＆＃39;元素＆＃39;：部分   不支持关键帧。

我试图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

“不支持部分关键帧”错误主要是在编写动画函数时拼错了某些内容时发生的。

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

border属性期望一个数字，例如0、1、2。但是在上面的代码中，您使用了字符“ O”而不是“ 0”。将“ O”替换为实际的零“ 0”后，它将正常工作。

Answer 3

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

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!