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

【问题标题】：Failed to execute angular animate : Partial keyframes are not supported无法执行角度动画：不支持部分关键帧
【发布时间】：2018-08-27 20:49:03
【问题描述】：

我开始使用 Angular 动画，但我遇到了这个错误：

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

我尝试用谷歌搜索，但没有成功。

这是我的代码：

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>

感谢您的帮助！

【问题讨论】：

标签： angular angular-animations

【解决方案1】：

看来问题出在我的第二个状态中的border: 0px CSS 属性。我用"none" 替换了它，它可以工作

【讨论】：

可能是边框属性需要每个边的参数？即border: 0px 0px 0px 0px?
不...这是因为他没有零像素属性。如果您阅读原始问题，它实际上是说 Capital-O Pixels Opx。但同样的原则也适用。如果您的代码中有错误或拼写错误，它将中断。有时以奇怪的方式。

【解决方案2】：

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

【讨论】：

这是我的问题。动画文字中的简单拼写错误

【解决方案3】：

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

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

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

【讨论】：

【解决方案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!

【讨论】：