Question

我创建了一个具有两个状态和两个状态之间转换的触发器

当我点击制作动画时，即使我输入3000毫秒的过渡时间，它也会立即运行

<div class="divv" [@goals]='stateExression'>
  <mat-card class="example-card">
    <mat-card-header>
      <div mat-card-avatar class="example-header-image"></div>
      <mat-card-title>Shiba Inu</mat-card-title>
      <mat-card-subtitle>Dog Breed</mat-card-subtitle>
    </mat-card-header>
    <img mat-card-image src="https://material.angular.io/assets/img/examples/shiba2.jpg" alt="Photo of a Shiba Inu">
    <mat-card-content>
      <p>
        Hello
      </p>
    </mat-card-content>
    <mat-card-actions>
      <button mat-button (click)="anim()">LIKE</button>
      <button mat-button>SHARE</button>
    </mat-card-actions>
  </mat-card>
</div>

状态改变功能：

stateExression : string='inactive';

anim() {
  if(this.stateExression === 'inactive')
  this.stateExression ='expended';
  else 
  this.stateExression = 'inactive';
}

动画触发器：

trigger('goals', [
    state('inactive', style({
      height: '300px'
  })),
    state('expended', style({
      height: '0px'
  })),
  transition ('inactive <=> expanded',animate('2000ms'))

  ])
]

如何让转换运行缓慢？

Answer 1

trigger('goals', [
    state('inactive', style({
      height: '300px'
  })),
    state('expended', style({
          ^^^^^^^^^^^   
      height: '0px'
  })),
  transition ('inactive <=> expanded',animate('2000ms'))
                           ^^^^^^^^^^
  ])
]

州名不同expanded与expended

Angular 5中的动画立即运行

1 个答案: