Angular animate the whole page content on click of a button - html

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