CODEWITHSUNDEEP
angularangular-animations
user1173169
user1173169

Reputation:

Failed to execute angular animate : Partial keyframes are not supported

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 !

Upvotes: 3

Views: 9082

Answers (4)

Matt Saunders
Matt Saunders

Reputation: 4084

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!

Upvotes: -1

Technocrat
Technocrat

Reputation: 41

'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

Upvotes: 4

Suamere
Suamere

Reputation: 6258

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.

Upvotes: 5

user1173169
user1173169

Reputation:

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

Upvotes: 4

Related Questions