Angular 笔记 动画02

Angular 官网教程

简单转场动画

做一个简单的转场动作，它把单个 HTML 元素从一个状态变成另一个状态。

trigger() 开始动画，并充当所有其它动画函数的容器。HTML 模板可以绑定到 triggerName。使用第一个参数来声明唯一的触发器名称。要使用数组语法。
state() 函数来定义不同的状态，供每次转场结束时调用。
animate() 指定转场的时序信息。delay 和 easing 是可选值。其中可以包含 style() 调用。
transition() 定义两个命名状态之间的动画序列。使用数组语法。

@Component({
  selector: 'app-open-close',
  animations: [
    trigger('openClose', [
      // ...
      state('open', style({
        height: '200px',
        opacity: 1,
        backgroundColor: 'yellow'
      })),
      state('closed', style({
        height: '100px',
        opacity: 0.5,
        backgroundColor: 'green'
      })),
      transition('open => closed', [
        animate('1s')
      ]),
      transition('closed => open', [
        animate('0.5s')
      ]),
    ]),
  ],
  templateUrl: 'open-close.component.html',
  styleUrls: ['open-close.component.css']
})
export class OpenCloseComponent {
  isOpen = true;

  toggle() {
    this.isOpen = !this.isOpen;
  }

}

<div [@openClose]="isOpen ? 'open' : 'closed'" class="open-close-container">
  <p>The box is now {{ isOpen ? 'Open' : 'Closed' }}!</p>
</div>

:host {
  display: block;
}

.open-close-container {
  border: 1px solid #dddddd;
  margin-top: 1em;
  padding: 20px 20px 0px 20px;
  color: #000000;
  font-weight: bold;
  font-size: 20px;
}