Html 单击按钮即可设置整个页面内容的动画

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

我尝试的是：

@组件({
选择器：“mypage”，
templateUrl:'./mypage.component.html'，
样式URL:['./mypage.component.scss']，
动画：[
触发器（'slideInOut'[
状态（'flyIn'，样式({
转换：“translateX（0）”中
})),
转换（“：输入”[
风格({
转换：“translateX（-100%）”
}),
设置动画（“0.5s 300毫秒缓进”）
]),
过渡（“：离开”[
设置动画（“0.3s放松”，样式({
变换：“translateX（100%）”
}))
])
])
],
});
animationState=“flyIn”；
数据刷新（id）{
this.animationState='flyIn'；
}

名称
描述

为什么不使用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;}
}

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

}

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

相关TS：

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

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

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

}

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

相关的HTML：

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

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

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

}

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

开始编辑以查看发生的奇迹：）

动画页面
名称
描述

---

检查

我会尝试让你知道。但这种情况只发生一次，我希望每当我点击链接时它都应该被设置动画。@PathikVejani，只要将css更改为

。myAnimateClass{border:1px纯红；display:block；animation:example 3s ease in-out；height:100vh；}@keyframes example{from{margin top:100vh；}到{margin left:0；}

在

中.myAnimateClass{边框：1px纯红；显示：块；动画：示例3s轻松进出；高度：100vh；}

。。。3s是速度（3秒）。。。您可以根据自己的需要更改动画：示例3s轻松输入输出到

动画：示例。2s线性