为什么我的 Angular 序列方法不起作用？

Question

为什么我的 Angular 序列方法不起作用（请参阅条目 -animation.ts 代码）？控制台没有抛出任何错误，VS Code 编译打字稿没有任何问题。

我正在尝试让 h1, h2, nav a 在 <p> 标签之前设置动画。我不能将动画延迟太久，因为当导航到页面时，我有导航链接为 <p> 标记设置动画。非常感谢任何帮助！

Stackblitz 示例： https://stackblitz.com/edit/angular-4gthrs?file=null

条目-animations.ts

import {trigger, animate, style, transition, stagger, query, state, sequence} from '@angular/animations';

export const headingAnimation = trigger('headingAnimation', [
  transition('* => void', sequence([ 
    query('nav a', [
      style({ opacity: 0 }),
      animate('.25s .4s ease-in', style({ opacity: 1 }))
    ]),
    query('p', [ 
      style({ opacity: 0, transform: 'translateY(-10px)' }),
      stagger(400, [
          animate('0.35s .4s ease-in', style({ opacity: 1, transform: 'translateY(0)' }))
      ])
    ])
  ])) 
]);

header.component.html

<header id="content-container" @headingAnimation>
<h1>Title</h1>
<h2>Subtitle</h2>

<nav>
    <a routerLink="/" routerLinkActive="active" [routerLinkActiveOptions]="{exact: true}">Home</a>
    <a routerLink="about" routerLinkActive="active" [routerLinkActiveOptions]="{exact: true}">About</a>
</nav>

about.component.html

<div @headingAnimation>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus lorem libero, volutpat et laoreet ut, placerat sed urna.</p>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus lorem libero, volutpat et laoreet ut, placerat sed urna.</p>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus lorem libero, volutpat et laoreet ut, placerat sed urna.</p>
</div>

Answer 1

有两个问题。

您需要将过渡从 * => void 更改为 :enter 或 void => *。你现在拥有的，只是为了离开风景。
更重要的是，您的序列将永远无法工作，因为您的元素位于不同的组件上。在 about 中，动画将失败，因为没有 nav > a 个元素，在 header 中，动画将失败，因为没有 p 个元素。

你可以对数字 2 做的最好的事情是将 {optional: true } 作为第三个参数添加到 query，但动画将同时开始。或者，您可以为 p 元素创建第二个动画并延迟 ease-in 更长的时间以模拟交错效果。

为什么我的 Angular 序列方法不起作用？

Why isn't my Angular Sequence Method working?

sequence

typescript

angular