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

为什么我的角度序列方法不起作用请参见entry-animation.ts代码？控制台没有抛出任何错误，VS代码编译typescript时没有任何问题

我正在尝试让h1、h2、nav a在标记之前设置动画。我不能将动画延迟太久，因为我有导航链接，可以在导航页面时设置标记的动画。非常感谢您的帮助

Stackblitz示例：

entry-animations.ts

header.component.html

关于.component.html

---

有两个问题

您需要将转换从*=>void更改为：enter或void=>*。你现在拥有的只是离开风景

更重要的是，您的序列将永远无法工作，因为您的元素位于不同的组件上。在“关于”中，动画将失败，因为没有导航>a元素；在标题中，动画将失败，因为没有p元素

---

对于数字2，最好是添加{optional:true}作为查询的第三个参数，但动画将同时开始。或者，您可以为p元素创建第二个动画，并将轻松度延迟更长时间以模拟交错效果。

只是一种预感，因为我不再专业地使用Angular，但是，您是否尝试过在转换周围包装一个setTimeout？@r3wt-我没有，因为我认为必须有一种原生的Angular/Typescript方法来完成此操作。@r3wt另外，当用户单击链接导航到另一个页面时，我需要动画不会有延迟。很遗憾，setTimeout不是一个选项。

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 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>

<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>