单击时对整个页面内容进行角度动画处理

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 = '';

  animatePage() {
    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