在这里,我尝试为home.component.html的元素
添加淡入淡出的动画。但是发生了错误。这是在Angular 6上完成的。
在home.component.ts中添加动画:[....]部分后出现错误
// app.module.ts
@NgModule({
imports: [
BrowserModule,
BrowserAnimationsModule,
]
// home.component.ts
@Component({
selector: 'dhz-home',
templateUrl: './home.component.html',
styleUrls: ['home.scss'],
animations: [
trigger( 'fadeInOnLoad', [
state('unloaded', style({
transform: 'translateY(-200px)',
visibility: 'hidden',
transition: '.5s transform .2s visibility',
})),
state('loaded', style({
visibility: 'visible',
transform: 'translateY(0)'
})),
transition('unloaded => loaded',[
animate('2s')
]),
])
]
})
// home.component.html
<p [@fadeInOnLoad]="isLoaded ? loaded : unloaded" >Fade Up</p>