title: Angular animation leave transition on child div
body: <p>Enter animation is working fine, but the leave animation is not working.
  if I move the @modalFadeZoom to parent both transitions works, but the problem with that is the scaling is not happening from center of the modal, which is giving weird animation.</p>
  <p>If i move @modalFadeZoom to the child the fade in zoom out is working fine.
  but no fade out and zoom in on closing the model.</p>
  <p><strong>component html</strong></p>
  <pre class="lang-html prettyprint-override"><code>    &lt;div class=&quot;modal-dialog&quot; *ngIf=&quot;showModal&quot;&gt;
              &lt;div class=&quot;modal-content&quot; [@modalFadeZoom]&gt;
                  &lt;div class=&quot;modal-header&quot;&gt;
                      &lt;h5 class=&quot;modal-title&quot;&gt;SOME TITLE&lt;/h5&gt;
                      &lt;button type=&quot;button&quot; (click)=&quot;showModal=false&quot; class=&quot;close&quot; aria-label=&quot;Close&quot;&gt;
                &lt;span aria-hidden=&quot;true&quot;&gt;×&lt;/span&gt;
              &lt;/button&gt;
                  &lt;/div&gt;
                  &lt;div class=&quot;modal-body&quot;&gt;
                      lorem ipsum etc etc
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
          &lt;div class=&quot;modal-backdrop fade show&quot; *ngIf=&quot;showModal&quot;&gt;&lt;/div&gt;
  </code></pre>
  <p><strong>ts file</strong></p>
  <pre class="lang-js prettyprint-override"><code>    import { Component, OnInit, trigger, transition, style, animate } from '@angular/core';
      
          @Component({
              templateUrl: 'modal.template.html',
              animations: [
                  trigger(
                      'modalFadeZoom',
                      [
                          transition(
                              ':enter', [
                                  style({ transform: 'scale(.7)', opacity: 0 }),
                                  animate('0.3s', style({ opacity: 1, transform: 'scale(1)' })),
                              ]
                          ),
                          transition(
                              ':leave', [
                                  style({ opacity: 1, transform: 'scale(1)' }),
                                  animate('5.3s', style({ opacity: 0, transform: 'scale(.7)' })),
                              ]
                          ),
                      ])
              ]
          })
          
          export class ModalComponent implements OnInit {
          
              private showModal = false;;
          
              ngOnInit(): void {
                  this.showModal = true;
              }
          }
  </code></pre>
  <p>css for modal-dialog</p>
  <pre class="lang-css prettyprint-override"><code>    .modal-dialog {
          position: fixed;
          top: 50%;
          left: 50%;
          height: auto;
          z-index: 2000;
          transform: translateX(-50%) translateY(-50%);
      }
  </code></pre>
  <p><strong>plnkr link</strong></p>
  <p>notice that i have moved animation to parent in the plnkr demo
  animation starts off from the center, because of scaling.</p>
  <p><a href="https://plnkr.co/Ldn4wJwuZMaaunVWuYpx" rel="nofollow noreferrer">https://plnkr.co/Ldn4wJwuZMaaunVWuYpx</a></p>