Question

所以我在玩Angular动画，但遇到以下问题：

我有一个帖子列表（正常/任务/事件）。当我加载并显示这些帖子时，我希望它们以动画形式fadeIn。我知道如何对每个元素应用相同的触发器来做到这一点，但是我想通过使用query()并通过添加它们共同的类（在.postEl）。谁能看到我做错了吗？

模板代码：我想将动画应用于常规/事件/任务发布元素。我已将@postAnimation触发器添加到保存这些元素的ng-container。

<div>
        <ul class="list-group ">

<ng-container @postAnimation *ngFor="let post of posts; let i = index;">
  <!-- Normal post -->
    <normal-group-post
      @slideOutRight
      class="postEl"
      *ngIf="post.type === 'normal'"
      [post]="post"
      [user]="user"
      [modules]="modules"
      [user_data]="user_data"
      [allMembersId]="allMembersId"
      [group]="group"
      [socket]="socket"
      (deletePost)="onDeletePost($event, i)"
      ng-repeat="post in posts">
    </normal-group-post>

    <!-- task post -->
    <task-group-post
      @slideOutRight
      class="postEl"
      *ngIf="post.type === 'task'"
      [post]="post"
      [user]="user"
      [isItMyWorkplace]="isItMyWorkplace"
      [modules]="modules"
      [user_data]="user_data"
      [allMembersId]="allMembersId"
      [group]="group"
      [socket]="socket"
      (deletePost)="onDeletePost($event, i)"
      ng-repeat="post in posts">
    </task-group-post>


    <!--EVENT post-->
    <event-group-post
      @slideOutRight
      class="postEl"
      *ngIf="post.type === 'event'"
      [post]="post"
      [user]="user"
      [isItMyWorkplace]="isItMyWorkplace"
      [modules]="modules"
      [user_data]="user_data"
      [allMembersId]="allMembersId"
      [group]="group"
      [socket]="socket"
      (deletePost)="onDeletePost($event, i)"
      ng-repeat="post in posts">
    </event-group-post>
</ng-container>
        </ul>

      </div>

我尝试使用组件和共享animate.ts文件中的以下代码为这些元素设置动画

@Component({
  selector: 'app-group-activity',
  templateUrl: './group-activity.component.html',
  styleUrls: ['./group-activity.component.scss'],
  providers: [NgbPopoverConfig, NgbDropdownConfig],
  animations: [
    trigger('postAnimation', [
      transition('void => *', [
        query('.postEl', [
          useAnimation(fadeInAnimation)
        ])
      ])
    ])
  ]
})

Animate.ts

export let fadeInAnimation = animation([
  style({ opacity: 0 }),
  animate('{{ duration }} {{ delay }}')
], {
  params: {
    duration: '1s',
    delay: '.4s'
  }
});

角动画查询功能不起作用

0 个答案: