Question

为什么我的角度序列方法不起作用（请参阅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>

Answer 1

有两个问题。

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

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

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

1 个答案: