Question

我目前正在根据单击哪个按钮（上一个或下一个）来实现具有不同动画的滑块。

在我尝试添加触发器:increment和:decrement（没有组和查询）之前，动画是有效的，但仅仅是一种方式。

现在，我尝试添加两个动画方向，我尝试了以下操作-图像已更改，但没有动画：

animations: [
    trigger('slideInOut', [
      transition(':increment', group([
        query(':enter', [
          style({
            transform: 'translateX(-200%)',
            filter: 'blur(5px)',
            opacity: 0.7
          }),
          animate('200ms ease-in-out', style({
            transform: 'translateX(0%)',
            filter: 'blur(0px)',
            opacity: 1
          }))
        ]),
        query(':leave', [
          animate('200ms ease-in', style({
            transform: 'translateX(100%)',
            filter: 'blur(2px)',
            opacity: 0.9
          }))
        ])
      ])),
      transition(':decrement', group([
        query(':enter', [
          style({
            transform: 'translateX(200%)',
            filter: 'blur(5px)',
            opacity: 0.7
          }),
          animate('200ms ease-in-out', style({
            transform: 'translateX(0%)',
            filter: 'blur(0px)',
            opacity: 1
          }))
        ]),
        query(':leave', [
          animate('200ms ease-in', style({
            transform: 'translateX(-100%)',
            filter: 'blur(2px)',
            opacity: 0.9
          }))
        ])
      ]))
    ])
  ]
 })

export class FrontComponent implements OnInit {

  image: number = 1;

  increase() {
    this.image = this.image === 1 ? 2 : 1;
  }

  decrease() {
    this.image = this.image === 1 ? 2 : 1;
  }

...

}

<img *ngIf="image === 1" [@slideInOut]="image" src="/assets/images/wrap.png" class="position-absolute w-100" alt="wrap">
<img *ngIf="image === 2" [@slideInOut]="image" src="/assets/images/wrap2.png" class="position-absolute w-100" alt="wrap">

Answer 1

您需要确保在删除dom之前计算动画触发器的“查询”，因为“查询”是用于查找内部HTML元素。为此，您只需将动画触发器上移一个级别即可。

<div [@slideInOut]="image">
  <img *ngIf="image === 1" src="/assets/images/wrap.png" class="position-absolute w-100" alt="wrap">
  <img *ngIf="image === 2" src="/assets/images/wrap2.png" class="position-absolute w-100" alt="wrap">
</div>

stackblitz-angular-animation-transition-increment-demo

Angular Animations增量和减量触发器不会触发

1 个答案: