在Angular 9中,你可以使用动画和*ngIf指令来创建动态显示和隐藏的效果。下面是一个解决方案,其中包含了代码示例:
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
@NgModule({
imports: [
BrowserModule,
BrowserAnimationsModule
],
declarations: [],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
Content to be shown or hidden
div {
opacity: 1;
transition: opacity 0.5s ease-in-out;
}
div.ng-leave,
div.ng-enter {
opacity: 0;
}
div.ng-leave.ng-leave-active,
div.ng-enter {
opacity: 0;
}
div.ng-leave,
div.ng-enter.ng-enter-active {
opacity: 1;
}
import { Component } from '@angular/core';
import { trigger, state, style, animate, transition } from '@angular/animations';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css'],
animations: [
trigger('fadeInOut', [
state('void', style({
opacity: 0
})),
transition('void <=> *', animate(500))
])
]
})
export class AppComponent {
showDiv: boolean = false;
toggleDiv() {
this.showDiv = !this.showDiv;
}
}
在上述代码中,我们通过*ngIf指令根据条件动态显示或隐藏内容。同时,我们使用[@fadeInOut]触发器和动画来定义淡入淡出的效果。点击按钮时,会调用toggleDiv()方法来切换showDiv变量的值,从而控制内容的显示或隐藏。
希望这个示例对你有所帮助!