title: Angular 8 - Animate image src change
body: <p>I am trying to create an animation in angular 8 that pulls in and out when the source is changed. Currently this only works when the image first loads, but does not continue to animate when the src is changed.</p>
  <p>Here is what i have so far:</p>
  <p><strong>app.component.ts</strong></p>
  <pre><code>import { trigger, state, style, animate, transition } from '@angular/animations';
  
  ....
  ....
  
  @Component({
      selector: &quot;app-page&quot;,
      templateUrl: &quot;app.page.html&quot;,
      styleUrls: [&quot;app.page.scss&quot;],
      animations: [
          trigger('EnterLeave', [
              state('flyIn', style({ transform: 'translateX(0)' })),
              transition('* =&gt; *', [
                  style({ transform: 'translateX(-100%)' }),
                  animate('0.5s 300ms ease-in')
              ]),
              transition(':leave', [
                  animate('0.3s ease-out', style({ transform: 'translateX(100%)' }))
              ])
          ])
      ]
  })
  </code></pre>
  <p><strong>app.page.html</strong></p>
  <p>This code here is what the animation is bound to. I added a function to make it easier to test. This just changes the image property value in the component to a random image source</p>
  <pre><code>&lt;img *ngIf=&quot;image&quot; [src]=&quot;image&quot; [@EnterLeave]=&quot;'flyIn'&quot; (click)=&quot;changeImage()&quot; /&gt;
  </code></pre>
  <p><strong>changeImage()</strong></p>
  <pre><code>    changeImage() {
          const sources = [
                         'https://images.unsplash.com/photo-1597741176776-25457188eafd?ixlib=rb-1.2.1&amp;q=80&amp;fm=jpg&amp;crop=entropy&amp;cs=tinysrgb&amp;w=1080&amp;fit=max',
                         'https://images.unsplash.com/photo-1597905040495-0aa996018b92?ixlib=rb-1.2.1&amp;q=80&amp;fm=jpg&amp;crop=entropy&amp;cs=tinysrgb&amp;w=1080&amp;fit=max',
                         'https://images.unsplash.com/photo-1596280364433-7742f3fb771e?ixlib=rb-1.2.1&amp;q=80&amp;fm=jpg&amp;crop=entropy&amp;cs=tinysrgb&amp;w=1080&amp;fit=max'];
  
          let randSrc = sources[Math.floor(Math.random() * sources.length)];
          this.image = randSrc;
      }
  </code></pre>
  <p>So this code is working fine in terms of the animation on the initial load, but i can't seem to figure out how to animate the image so that it pulls in and out when the property value is changed programatically as it just seems to change suddenly without the specified animation.</p>