angular - 角度 6 动画 *ngIf,过渡不起作用
问题描述
该项目展示了两种动画变体。
动画选项 1,trigger('animationOption1')
可以毫无怨言地工作。
动画选项 2,trigger('animationOption2')
过渡在这里不起作用。
app.component.html
<h1>Animation Option 1</h1>
<div (click)="changeDivState()"
[@animationOption1]="clickedDivState"
>Click Me
</div>
<h1>Animation Option 2</h1>
<button (click)="toggleMenu()">Click Me</button>
<ul *ngIf="isMenuOpen"
[@animationOption2]="isMenuOpen ? 'open': 'close'"
>
<li>Menu Item 1</li>
<li>Menu Item 2</li>
<li>Menu Item 3</li>
</ul>
app.component.ts
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css'],
animations: [
trigger('animationOption1', [
state('start', style({
backgroundColor: 'yellow',
width: '150px',
height: '150px'
})),
state('end', style({
backgroundColor: 'green',
width: '300px',
height: '300px'
})),
transition('start => end', animate(1500)),
transition('end => start', animate('800ms 0.5s ease-out'))
]),
trigger('animationOption2', [
state('close', style({
opacity: 0,
backgroundColor: 'yellow'
})),
state('open', style({
opacity: 1,
backgroundColor: 'green'
})),
transition('close <=> open', animate(3000)),
])
]
})
export class AppComponent {
isMenuOpen = false;
clickedDivState = 'start';
changeDivState() {
this.clickedDivState = 'end';
setTimeout(() => {
this.clickedDivState = 'start';
}, 3000);
}
toggleMenu(): void {
this.isMenuOpen = !this.isMenuOpen;
}
}
谷歌搜索并没有找到解决方案。
解决方案
要使其正常工作,您需要删除*ngIf="isMenuOpen"
. <ul>
Angular 无法计算closed
/状态之间的转换,因为当isopen
时元素根本不存在。isMenuOpen
false
这是一个StackBlitz,显示了已移除的动画*ngIf
。
或者,您可以利用进入/离开状态与*ngIf
. 它看起来像这样:
trigger('animationOption2', [
transition(':enter', [
style({ backgroundColor: 'yellow' }),
animate(300)
]),
transition(':leave', [
animate(300, style({ backgroundColor: 'yellow' }))
]),
state('*', style({ backgroundColor: 'green' })),
])
这是一个正在运行的StackBlitz。
推荐阅读
- html - 如何在css中设置框内的上边距?
- java - 使用微调器移动到另一个活动时应用程序崩溃
- python-3.x - 如何判断 onedrive for business onedrive-sdk-python 是否经过身份验证?
- javascript - 使用 toISOString javascript 将一位数日月转换为 2 位数
- html - 背景颜色未显示在外部 CSS 文件中
- html - 引导滑块不滑动
- reporting - 在哪里可以找到用于生成蛇形报告的文件 workflow.rst 的示例?
- java - 路线 [product.store] 未定义。(查看:C:\xampp\htdocs\hijabrent\resources\views\product\create.blade.php)
- ios - 在显示将 isModalInPresentation 设置为 true 的页面后,无法正常关闭弹出框
- javascript - 页面关闭后网站如何显示通知?