3

I'm getting started with Angular animations and i'm stuck on that error:

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

I tried to google it without any success.

Here is my code:

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";
}

My 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>

Thank your for your help !

Improve this question

4 Answers 4

Reset to default
5

Contrary to your personal answer. You don't HAVE a Zero Pixel property. If you read your original question, it actually said Capital-Oh Pixels Opx. But the same principle applies. If you have errors or misspellings in your code, it'll break. Sometimes in weird ways. Zero Pixels 0px would work just fine.

Improve this answer
Sign up to request clarification or add additional context in comments.

1 Comment

This was my problem. simple spelling errors in the animation literal
4

It seems the problem was coming from my border: 0px CSS property within my second state. I replaced it with "none" and it works

Improve this answer

2 Comments

Could be that the border property required an argument for each side? i.e. border: 0px 0px 0px 0px?
No... it's because (s)he didn't HAVE a Zero Pixel property. If you read the original question, it actually said Capital-O Pixels Opx. But the same principle applies. If you have errors or misspellings in your code, it'll break. Sometimes in weird ways.
4

'Partial Keyframes are not supported' error mainly happens when you misspell something while writing your animation function.

In the above case you have misspelled the 'border' property value in second state.

border property expects a number like 0, 1, 2. But in the above code, you used a character 'O' instead of '0'. Once you replace the 'O' with actual zero '0' it will work fine.

This link will open a picture which will show you were the error was and what you misspelled

Improve this answer

Comments

-1

This error can also arise when a unit for your CSS value is omitted. E.g:

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: '*' })),
]),

Will throw an error. The style should be:

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

Comments