Question

因此，当用户访问相册页面时，我希望相册照片在页面加载时向右滑动。我该怎么办呢？这是动画：

  animations: [
    trigger('slide-in',[
      state('out', style({
        transform: 'translateX(-400px)',
        opacity: "0"
      })),
      state('in', style({
        transform: 'translateX(0px)',
      })),
      transition('out => in',
        animate('1000ms ease-in', keyframes([
          style({ opacity: 0, offset: 0}),
          style({ opacity: 0.5, offset: 0.5}),
          style({ opacity: 1, offset: 1}),
        ]))),
    ])
  ]

HTML：

  <img [@slide-in]='state' src="{{albumToDisplay.albumCover}}" style="float: left;"/>

然后我有一个变量来保持它的状态：

state: string = 'out';

我失败的解决方案就是这个（在component.ts中）：

ngOnInit {
this.state = 'in';
}

Answer 1

所以，我明白了。

我不得不使用Angular LifeCycle Hook“AfterViewInit”。

所以在代码中，我必须导入“AfterViewInit”，然后在类上实现它。

.red{
background:red;
}
.green{
background:green;
}

在初始化组件中的视图后，状态从“out”变为“in”。

相册 - 页面视图初始化 - ＆gt;状态从'out'变化 - ＆gt; '在'

ALSO

我必须导入'ChangeDetectorRef'并注入构造函数。（这里不会太过分了）

Angular 4动画onload？

1 个答案: