Reputation:
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
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
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.
Upvotes: 4
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
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