Javascript Angular 10中的动画

试图在组件中的图片上获得淡入效果，对淡出不感兴趣

我在第一次创建组件时工作，但在img src标记更改后不会触发。我的理解是，这是因为它只在创建元素时激发

唯一的触发方式似乎是，我将URL放入一个数组中，并使用ngFor。我使用的是标准的detectchanges，无法想象我做错了什么。下面是示例代码，但我做了很多尝试。我只想更改一个src标记，让动画每次运行，而不是第一次运行，理想情况下不使用计时器或删除类

    <picture class="a-image"
      (@fading.start)="onImageFadeStart($event)"
      (@fading.done)="onImageFadeDone($event)"
      [@fading]='state'
      >
      <source media="(min-width: 1024px)" srcset={{urls?.url_lg}} />
      <source media="(min-width: 640px)" srcset={{urls?.url_md}} />
      <source media="(min-width: 320px)" srcset={{urls?.url_sm}} />
      <img src={{urls?.url_default}} alt="a image" />
    </picture>

---

这应该足够简单，只需CSS和一些表达式

我有一张ngFor和一张图片

HTML：

<div>
  <img class="fade-img" 
  [ngClass]="doShowLast ? 'show' : 'hide'"    
  src="https://live.staticflickr.com/7875/47004083192_7fd9fff8c3.jpg" width="500"
  height="333" alt="Drone">

 </div>

在我的打字脚本中，我所做的只是从一个按钮点击翻转一个值来显示按钮（您可能会以不同的方式处理）

---

这应该足够简单，只需要CSS和一些表达式

我有一张ngFor和一张图片

HTML：

<div>
  <img class="fade-img" 
  [ngClass]="doShowLast ? 'show' : 'hide'"    
  src="https://live.staticflickr.com/7875/47004083192_7fd9fff8c3.jpg" width="500"
  height="333" alt="Drone">

 </div>

在我的打字脚本中，我所做的只是从一个按钮点击翻转一个值来显示按钮（您可能会以不同的方式处理）

---

我们对你所做的了解不够，看不到这个问题。奥斯汀说了什么。这取决于你如何真正改变你的图片url。您可以尝试在元素上放置*ngIf，以便替换它（从而重新启动动画）。但这涉及到在更新之前先将irl设置为null。我们看不到足够多的您正在做的事情来了解问题。奥斯汀说了什么。这取决于你如何真正改变你的图片url。您可以尝试在元素上放置*ngIf，以便替换它（从而重新启动动画）。但这需要在更新之前先将irl设置为null。

doShowLast = false;

switchLast(){
  this.doShowLast = !this.doShowLast;
}