Question

我在实例化组件时尝试执行动画。情况就是这样：我已经获得了许多卡片，其中包括＆＃34;评论＆＃34;按钮，当我按下它时，一个新组件＆＃34;评论＆＃34;插入卡中，展开所有这些注释时展开它。

好吧，现在我希望这张卡片能够用动画慢慢扩展。为此，我在this tutorial之后下载了web-animations.js和web-animations-map.js。然后，我做了一个测试，尝试做一个动画，在300毫秒内将不透明度从0.1设置为1：

@Component({
   selector: 'comments',
   templateUrl: 'comments.html',
   animations: [
     trigger('openAnm', [
       state('closed', style({
         opacity: 0.1
       })),
       state('open', style({
         opacity: 1
       })),
       transition('closed => open', animate('300ms ease-in')),
       transition('open => closed', animate('300ms ease-in')),
     ])
   ]
})

export class Comments{

  @Input() commentList;
  listLimit;
  animationState = 'closed';

   constructor(){
     this.listLimit = 4;
     setTimeout(
      this.animationState = 'open',
      50
     );

   }

我将@openAnm触发器分配给我的代码的主要部分：

<div [@openAnm]="animationState">
   // more code...
</div>

...我在父视图中从此按钮调用：

<button ion-button item-right icon-right  clear color="dark" *ngIf="card.type != 3" (click)="switchVisible(card.id)">
        // more code...

        // my custom component for the comments section
<comments *ngIf="viewCommentsFrom === card.id" [commentList]=getComments(card.id)></comments>

除了动画（该死的！）之外，Everythineg的作品。我认为我对动画触发器的调用是不正确的，因为它似乎是用于按钮等等，但我不知道如何从父视图调用该动画＆＃ 39; s按钮，因此组件在其实例化中执行动画。

有任何帮助吗？谢谢！

在Ionic 2中动画化组件的实例化

0 个答案: