Angular animate the whole page content on click of a button

Question

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:

What I tried is:

@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';
}

<div [@slideInOut]="animationState">
  <!-- Here is other page content, which I need to animate from bottom -->
  <div class="col-lg-10 col-md-10 col-10" (click)="dataRefresh(id)">
    <div class="row">
      <div class="col-lg-12 col-md-12 col-12">
        <div class="branch_row_padding">
          <div class="">Name</div>
          <div class="">Description</div>
        </div>
      </div>
    </div>
  </div>
</div>

By trying above, what happens only link div is animating from left side, I want to animate whole page.

What can be the possible solution for this?

Answer 1

Why not do it with just CSS?

relevant css:

.myAnimateClass{
border:1px solid red;display:block; animation: example 3s ease-in-out;  
}

@keyframes example {
  from {margin-left:-100%;}
  to {margin-left:0;}
}

relevant TS:

import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
})
export class AppComponent {
  name = 'Angular 6';
  show: boolean = true;
  myAnimateClass: string = '';

  resetClass() {
    console.log("check");
    setTimeout(() => {
      this.myAnimateClass = 'myAnimateClass';
    },100);
  }

  animatePage() {
    if(this.myAnimateClass == 'myAnimateClass') {
    this.myAnimateClass = 'something'; 
    this.resetClass();
    } else{
    this.myAnimateClass = 'myAnimateClass';
    }
  }

}

relevant HTML:

<div [ngClass]='myAnimateClass'>
    <hello name="{{ name }}"></hello>
    <p>
        Start editing to see some magic happen :)
    </p>

    <button type="button" (click)='animatePage()'>Animation page</button> 

  <div >
    <!-- Here is other page content, which I need to animate from bottom -->
    <div class="col-lg-10 col-md-10 col-10" (click)="dataRefresh(id)">
      <div class="row">
        <div class="col-lg-12 col-md-12 col-12">
          <div class="branch_row_padding">
            <div class="">Name</div>
            <div class="">Description</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

check working stackblitz here