代码之家 › 专栏 › 技术社区 › Flyii

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

angular-animations angular

13

Flyii · 技术社区 · 7 年前

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

child.component.ts

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

parent.component.hmtl.ts

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

Stackblitz Example

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

animateChild() 听起来可能有用,但我不知道如何使用它。这是正确的解决方案吗?如果是这样的话,举个例子会很有帮助。

提前谢谢

编辑

编辑2

child.component.ts

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

x是一个变量,每个子组件都会增加。

编辑3: 到目前为止,anwers或多或少是我在第二次编辑中提到的解决方案。虽然这些工作,我仍然认为这些作为解决方案。

我正在寻找一个只涉及父组件的解决方案,因此子组件应该保持与中相同的方式 this non working example

3 回复 | 直到 7 年前

1

9

Just code 7 年前

第二个参数delay的语法与duration相同。对于

等待100毫秒,然后运行200毫秒:“0.2秒100毫秒”

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

2

3

Community Mohan Dere 6 年前

这些不是唯一的选择,但我知道。角度7兼容。

Working Stackblitz Demo

在子组件中,将动画状态声明为主体绑定。

@HostBinding('@animationState') animstate : string = 'preanimationstate';

@Input('delay') delay : number;

像这样传递延迟:

<child-component [delay]="500"></child-component>

let self = this;
window.setTimeout(function () {
    self.animstate = 'newstate';
}, self.delay);

选项2:将动画移动到HostComponent并手动应用状态

child.component.ts 到 parent.component.ts ,然后使用初始状态修改器关闭所有子组件,如下所示:

<child [@animstate]="initial"></child>>

然后通过 查看儿童 :

@ViewChildren(ChildComponent) childComponents as QueryList<ChildComponent>;

这可以通过 . 使用for/each循环和 window.setTimeout 功能。

3

1

Ismoil Shifoev 7 年前

以防万一有人再次遇到这个问题:如果你想让两个动画同时播放,你只需要使用 group 和 animateChild . 基本上,在第一篇文章中链接的plunker中,您必须替换 outerTransition 以下是:

const outerTransition = transition('void => *', [
  style({opacity: 0}),
  group([
    animate(2000, style({opacity: 1})),
    query('@inner', [
      animateChild()
    ]),
  ]),
]);