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

Question

我开始使用Angular动画，但我一直停留在该错误上：

错误DOMException：无法在“元素”上执行“动画”：不支持部分关键帧。

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

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