Angular 如何延迟/错开子组件内部的动画

Question

我有一个带有动画的子组件

child.component.ts

@Component({
  selector: 'child',
  animations:[
    // animations
   ]
})
export class ChildComponent { ... }

还有一个父组件，它在 html 中有 2 个子组件

parent.component.hmtl.ts

...
<child></child>
<child></child>
...

Stackblitz Example

我想实现的是在父组件中错开子组件的动画。因此第二个子组件应该在 X 秒后开始动画。

animateChild()听起来它可能有用，但我不知道如何使用它。这是正确的解决方案吗？如果是这样，一个例子将非常有帮助。

提前致谢

编辑:animateChild() 似乎不适用于这种情况。显然它只适用于在父组件中定义的动画。

EDIT2:我认为可以通过向子组件内的动画添加延迟来解决此问题。

child.component.ts

@Component({
  selector: 'child',
  animations:[
    animate(x),
    // animations
   ]
})
export class ChildComponent { ... }

x 将是一个变量，它会随着每个子组件的增加而增加。这个解决方法对我来说有点乱

EDIT3: 到目前为止的答案或多或少是我在第二次编辑中提到的解决方案。虽然这些确实有效，但我仍然认为它们是解决方法。

我正在寻找一个只涉及父组件的解决方案，因此子组件应该保持它在 this non working example 中的样子。

Answer 1

根据动画功能中的 Angular 文档。

The second argument, delay, has the same syntax as duration. For example:

Wait for 100ms and then run for 200ms: '0.2s 100ms'

全文阅读here

所以，我们的目标是像这样传递第二个参数

animate('2000ms {{delay}}ms'

首先，让我们将输入参数添加到您的子组件，以便我们可以接受来自父组件的输入值:

export class ChildComponent implements OnInit {
  @Input() delay: number = 0;
  constructor() { }    
}

现在，让我们从父组件传递参数值

<p>child1</p>
<app-child [delay]="0"></app-child>

<p>child2</p>
<app-child [delay]="1000"></app-child>
<p>child2 should have a delay</p>

在您的子组件中，我们需要将此参数传递给动画触发器，因此它看起来像这样

<p [@childAnimation]="{value:'',params:{delay:delay}}">
    IIIIIIIIIIIIIIIIII
</p>

最后我们可以改变我们的动画来支持这个参数值

animations: [
    trigger('childAnimation', [
      transition(':enter', [
        animate('2000ms {{delay}}ms', style({ transform: 'translateX(80%)' })),
        animate('2000ms', style({ transform: 'translateX(0)' })),
      ], { params: { delay: 0 } })
    ])
  ]

现在一切都好，你现在应该延迟输入。

Check out demo here