要在Angular中为DOM添加样式动画,可以使用Angular的动画模块。以下是一个示例解决方案:
npm install @angular/animations --save
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
@NgModule({
imports: [
BrowserAnimationsModule
],
// ...
})
export class AppModule { }
animation.component.ts:
import { Component } from '@angular/core';
import { trigger, state, style, animate, transition } from '@angular/animations';
@Component({
selector: 'app-animation',
template: `
Animated Element
`,
animations: [
trigger('myAnimation', [
state('small', style({
transform: 'scale(1)',
})),
state('large', style({
transform: 'scale(1.5)',
})),
transition('small <=> large', animate('300ms ease-in')),
]),
],
})
export class AnimationComponent {
state: string = 'small';
toggleState() {
this.state = (this.state === 'small' ? 'large' : 'small');
}
}
animation.component.html:
Animated Element
这个示例演示了一个简单的缩放动画,点击元素时会在“small”和“large”状态之间切换。你可以根据需要修改动画的样式和过渡效果。