Open
Description
Which @angular/* package(s) are the source of the bug?
animations
Is this a regression?
No
Description
A very simple scale animation, you can clone the repo here.
@Component({
selector: 'app-root',
standalone: true,
template: `
<button (click)="scaleState.set('scale-up')">scale up</button>
<button (click)="scaleState.set('scale-down')">scale down</button>
<h1 [@scale]="scaleState()">Hello World</h1>
`,
styles: `
h1 {
margin-top: 64px;
width: max-content;
}
`,
animations: [
trigger('scale', [
state('scale-up', style({ transform: 'scale(5)' })),
state('scale-down', style({ transform: 'scale(0)' })),
transition('* <=> *', animate('5s ease'))
])
]
})
export class AppComponent {
scaleState = signal<'scale-up' | 'scale-down'>('scale-down');
}
The Problem:
when scaling up, press the scale down button and it will stuck there.
The Reason:
when doing the scale down animation, Angular will do something like this
const h1 = document.querySelector<HTMLElement>('h1')!;
const currentTransform = window.getComputedStyle(h1).transform;
h1.animate([
{ transform: currentTransform, offset: 0 },
{ transform: 'scale(0)', offset: 1 }
],
{
duration: 5000,
fill: 'forwards',
easing: 'ease',
});
the key point is using Matrix (this is quite rare), you can play with the native Web Animation API with latest Chrome browser, there is the same problem.
Hot to fix:
Don't use matrix. (it can only done by Angular Team)
const h1 = document.querySelector<HTMLElement>('h1')!;
const currentTransform = window.getComputedStyle(h1).transform;
const matrix = new WebKitCSSMatrix(currentTransform);
h1.animate([
{ transform: `scale(${matrix.m11})`, offset: 0 },
{ transform: 'scale(0)', offset: 1 }
],
{
duration: 5000,
fill: 'forwards',
easing: 'ease',
});
or don't use scale(0), use scale(0.000001), it can be done by developer.
const h1 = document.querySelector<HTMLElement>('h1')!;
const currentTransform = window.getComputedStyle(h1).transform;
h1.animate([
{ transform: currentTransform, offset: 0 },
{ transform: 'scale(0.00001)', offset: 1 }
],
{
duration: 5000,
fill: 'forwards',
easing: 'ease',
});
Please provide a link to a minimal reproduction of the bug
https://github.com/keatkeat87/angular-animation-transform-matrix-issue.git
Please provide the exception or error you saw
check the description part.
Please provide the environment you discovered this bug in (run ng version)
Angular CLI: 18.0.2
Node: 20.11.1
Package Manager: yarn 1.22.19
OS: win32 x64
Angular: 18.0.1
... animations, common, compiler, compiler-cli, core, forms
... platform-browser, platform-browser-dynamic, router
Package Version
---------------------------------------------------------
@angular-devkit/architect 0.1800.2
@angular-devkit/build-angular 18.0.2
@angular-devkit/core 18.0.2
@angular-devkit/schematics 18.0.2
@angular/cli 18.0.2
@schematics/angular 18.0.2
rxjs 7.8.1
typescript 5.4.5
zone.js 0.14.6
Anything else?
No response