html - Angular 在单击按钮时为整个页面内容设置动画

Question

当我点击链接时，我想从底部开始动画。下面是我想要实现的图像。单击链接时，整个“红色”部分应该是动画的并且来自底部。为了实现这一目标，我所做的是:

我试过的是:

@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>

通过上面的尝试，只有链接 div 从左侧开始动画，我想为整个页面制作动画。

可能的解决方案是什么？

Answer 1

为什么不只用 CSS 来做呢？

相关css:

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

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

相关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';
    }
  }

}

相关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>

检查 working stackblitz here