要在Angular 2中使用动画重新渲染用户界面,你可以按照以下步骤进行解决:
npm install @angular/animations
imports
数组中:import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
@NgModule({
imports: [
BrowserAnimationsModule
]
})
export class AppModule { }
@Component
装饰器来定义组件并在animations
属性中定义动画效果:import { Component, OnInit } from '@angular/core';
import { trigger, state, style, animate, transition } from '@angular/animations';
@Component({
selector: 'app-animation-example',
templateUrl: './animation-example.component.html',
styleUrls: ['./animation-example.component.css'],
animations: [
trigger('fade', [
state('in', style({ opacity: 1 })),
transition(':enter', [
style({ opacity: 0 }),
animate('500ms ease-out')
]),
transition(':leave', [
animate('500ms ease-in', style({ opacity: 0 }))
])
])
]
})
export class AnimationExampleComponent implements OnInit {
isVisible = false;
toggleVisibility() {
this.isVisible = !this.isVisible;
}
ngOnInit() {
}
}
[@triggerName]
语法来应用动画效果:
This is some content that will be animated.
这就是使用Angular 2在用户界面上重新渲染动画的解决方法。当你点击"Toggle Visibility"按钮时,动画效果将被触发,通过改变isVisible
属性的值来控制元素的可见性。