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

【问题标题】：Why isn't my Angular Sequence Method working?为什么我的角度序列方法不起作用？
【发布时间】：2019-08-15 05:51:17
【问题描述】：

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

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

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

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

【问题讨论】：

只是一种预感，因为我不再专业地使用 Angular，但是您是否尝试过将 setTimeout 包裹在您的 transition 周围？
@r3wt - 我没有，因为我认为必须有一个原生的“Angular/Typescript”方式来完成这个。
@r3wt 同样，当用户单击链接导航到另一个页面时，我需要动画没有延迟。不幸的是，setTimeout 不是一个选项。

标签： angular typescript sequence

【解决方案1】：

有两个问题。

您需要将转换从 * => void 更改为 :enter 或 void => *。你现在拥有的只是为了离开视野。
更重要的是，您的序列永远不会起作用，因为您的元素位于不同的组件上。 about 动画将失败，因为没有 nav > a 元素，而在 header 动画将失败，因为没有 p 元素。

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

【讨论】：