这是我的组件模板
<nav class="menu" [ngClass]="{ snap: snap }" [@menuBackground]="'normal'">
<div class="container fluid">
<div class="row align-items-center">
<div class="col-2" [@logoZoomOut]="'normal'">
<img *ngIf="true" src="../../../assets/logo.png" class="logo img-fluid" alt="logo" />
</div>
<div
class="links-wrapper text-right d-none d-md-block col-md-8 offset-md-2 col-lg-6 offset-lg-4 col-xl-5 offset-xl-5"
>
<ul>
<app-menu-link [link]="'/'" [text]="'Home'" [first]="true"></app-menu-link>
<app-menu-link [link]="'/services'" [text]="'Services'"></app-menu-link>
<app-menu-link [link]="'/portfolio'" [text]="'Portfolio'"></app-menu-link>
<app-menu-link [link]="'/contact'" [text]="'Contact'" [contact]="true"></app-menu-link>
</ul>
</div>
</div>
</div>
</nav>
这是我的组件代码:
import { Component, OnInit, OnDestroy } from '@angular/core';
import { trigger, state, style, transition, animate } from '@angular/animations';
@Component({
selector: 'app-menu',
templateUrl: './menu.component.html',
styleUrls: ['./menu.component.scss'],
animations: [
trigger('menuBackground', [
state('normal', style({ background: 'rgba(118, 137, 169, 0.22)' })),
transition('void => normal', [style({ background: 'none' }), animate('.5s 2s ease-in')])
]),
trigger('logoZoomOut', [
state('normal', style({ transform: 'scale(1)' })),
transition('void => normal', [style({ transform: 'scale(1.5)' }), animate('.5s ease-in')])
])
]
})
export class MenuComponent implements OnInit, OnDestroy {
public snap = false;
constructor() {}
ngOnInit() {
window.addEventListener('scroll', this.scroll, true);
}
ngOnDestroy() {
window.removeEventListener('scroll', this.scroll, true);
}
scroll = (): void => {
if (window.pageYOffset > 90) {
this.snap = true;
} else {
this.snap = false;
}
};
}
现在我想对导航的背景和徽标大小进行动画处理。但问题是,当nav
和div
上同时设置menuBackground
和logoZoomOut
触发器时 - 只有背景是动画的,而没有播放徽标的动画。
当我删除背景动画时 - 徽标动画正确。
那么如何同时为这两个元素制作动画呢?我认为它应该独立工作。我对徽标动画也有问题 - 如果没有*ngIf="true"
元素img
它就无法工作。也许它有某种联系?
您可以使用 animateChild 实现触发内部动画。如果要同时触发两个动画,则需要另外使用组。
堆栈闪电战示例