title: Angular animate the whole page content on click of a button
body: <p>I want to animate from bottom when I click on link. Below is the image what I want to achieve. On click of Link whole "Red" section should be animated and come from the bottom side. To achieve that What I did is:</p>
  
  <p><a href="https://i.stack.imgur.com/K6Pou.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/K6Pou.png" alt="Animate Content From Bottom Side"></a></p>
  
  <p><strong>What I tried is:</strong></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>@Component({
    selector: 'mypage',
    templateUrl: './mypage.component.html',
    styleUrls: ['./mypage.component.scss'],
    animations: [
      trigger('slideInOut', [
        state('flyIn', style({
          transform: 'translateX(0)'
        })),
        transition(':enter', [
          style({
            transform: 'translateX(-100%)'
          }),
          animate('0.5s 300ms ease-in')
        ]),
        transition(':leave', [
          animate('0.3s ease-out', style({
            transform: 'translateX(100%)'
          }))
        ])
      ])
    ],
  });
  
  animationState = "flyIn";
  
  dataRefresh(id) {
    this.animationState = 'flyIn';
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div [@slideInOut]="animationState"&gt;
    &lt;!-- Here is other page content, which I need to animate from bottom --&gt;
    &lt;div class="col-lg-10 col-md-10 col-10" (click)="dataRefresh(id)"&gt;
      &lt;div class="row"&gt;
        &lt;div class="col-lg-12 col-md-12 col-12"&gt;
          &lt;div class="branch_row_padding"&gt;
            &lt;div class=""&gt;Name&lt;/div&gt;
            &lt;div class=""&gt;Description&lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>By trying above, what happens only link div is animating from left side, I want to animate whole page.</p>
  
  <p>What can be the possible solution for this?</p>