Angular 8 - 动画图像 src 更改答案

【问题标题】：Angular 8 - Animate image src changeAngular 8 - 动画图像 src 更改
【发布时间】：2020-09-02 12:50:16
【问题描述】：

我正在尝试以 8 角创建一个动画，当源更改时它会拉入和拉出。目前这仅在图像首次加载时有效，但在更改 src 时不会继续动画。

这是我目前所拥有的：

app.component.ts

import { trigger, state, style, animate, transition } from '@angular/animations';

....
....

@Component({
    selector: "app-page",
    templateUrl: "app.page.html",
    styleUrls: ["app.page.scss"],
    animations: [
        trigger('EnterLeave', [
            state('flyIn', style({ transform: 'translateX(0)' })),
            transition('* => *', [
                style({ transform: 'translateX(-100%)' }),
                animate('0.5s 300ms ease-in')
            ]),
            transition(':leave', [
                animate('0.3s ease-out', style({ transform: 'translateX(100%)' }))
            ])
        ])
    ]
})

app.page.html

这里的代码是动画绑定的。我添加了一个功能以使其更易于测试。这只是将组件中的图像属性值更改为随机图像源

<img *ngIf="image" [src]="image" [@EnterLeave]="'flyIn'" (click)="changeImage()" />

changeImage()

    changeImage() {
        const sources = [
                       'https://images.unsplash.com/photo-1597741176776-25457188eafd?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=1080&fit=max',
                       'https://images.unsplash.com/photo-1597905040495-0aa996018b92?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=1080&fit=max',
                       'https://images.unsplash.com/photo-1596280364433-7742f3fb771e?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=1080&fit=max'];

        let randSrc = sources[Math.floor(Math.random() * sources.length)];
        this.image = randSrc;
    }

所以这段代码在初始加载的动画方面工作正常，但我似乎无法弄清楚如何为图像设置动画，以便在以编程方式更改属性值时它会拉入和拉出，因为它只是在没有指定动画的情况下似乎突然改变了。

【问题讨论】：

标签： javascript angular angular8

【解决方案1】：

查询 src 时，我能够为图像制作动画因为 src 属性是唯一改变的属性。

export const fadeIn = trigger( "fadeInAnimation", [
  transition( '* => *', [

    query(        <---------THIS
      "img[src]", <---------THIS
      [
        style( { opacity: 0 } ),
        animate( ".8s cubic-bezier(0.4, 0.0, 0.2, 1)", style( { opacity: 1 } ) )
      ],
      {
        optional: true
      }
    )
  ] )
] );

【讨论】：