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

Question

我有一个带动画的子组件

child.component.ts

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

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

parent.component.hmtl.ts

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

Stackblitz示例

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

animateChild()听起来可能有用,但我无法弄清楚如何使用它.这是正确的解决方案吗？如果是这样,一个例子真的很有帮助.

提前致谢

编辑:animateChild()似乎不适用于这种情况.看起来它只适用于父组件中定义的动画.

编辑2:我认为可能有一个解决方法是在子组件内部添加动画延迟.

child.component.ts

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

x将是一个为每个子组件增加的变量.这种解决方法对我来说有点混乱

EDIT3:到目前为止,anwers或多或少是我在第二次编辑中提到的解决方案.虽然这些确实有用,但我仍然认为这些是解决方法.

我正在寻找一个只涉及父组件的解决方案,因此子组件应该保持在这个非工作示例中的样子

Answer 1

按照动画功能中的角度文档。

第二个参数delay的语法与duration相同。例如：

等待100毫秒，然后运行200毫秒：“ 0.2秒100毫秒”

在这里阅读全文

因此，我们的目标是传递第二个这样的参数

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 } })
    ])
  ]

现在一切都好，您应该现在延迟输入的工作。

在这里查看演示