angular+ 动画——关键帧动画keyframe()

// 关键帧动画 keyframe()函数：一个转场动画中有多个步骤的动画（即多个临时样式）；简单理解：在一个时间段里进行多个样式的变化更改；即多个步骤的动画

// 可配合偏移值来分配每个步骤动画持续时间；offset 值（0-1）；可以理解为值越大时间长；（即定义动画里每次样式变化的时机）

import { Component } from '@angular/core';
import { trigger, transition, state, animate, style, keyframes } from '@angular/animations';

@Component({
  selector: 'app-status-slider',
  templateUrl: 'status-slider.component.html',
  styleUrls: ['status-slider.component.css'],
  animations: [
    trigger('slideStatus', [
      state('inactive', style({ backgroundColor: 'blue' })),
      state('active', style({ backgroundColor: 'orange' })),

      transition('* => active', [
        animate('2s', keyframes([ // 一个2s的多个步骤动画，3次背景色的变更，而偏移值这里，可以理解为 0-0.3这个阶段使用的2s中 0-0.6s 的这段时间0.6s；0.3-1.0 则占用了0.6-2s间的1.4s；
          style({ backgroundColor: 'blue', offset: 0}),
          style({ backgroundColor: 'red', offset: 0.3}),
          style({ backgroundColor: 'orange', offset: 1.0})
        ])),
      ]),
      transition('* => inactive', [
        animate('2s', keyframes([
          style({ backgroundColor: 'orange', offset: 0}),
          style({ backgroundColor: 'red', offset: 0.2}),
          style({ backgroundColor: 'blue', offset: 1.0})
        ]))
      ]),
    ])
  ]
})
export class StatusSliderComponent {
  status: 'active' | 'inactive' = 'inactive';

  toggle() {
    if (this.status === 'active') {
      this.status = 'inactive';
    } else {
      this.status = 'active';
    }
  }
}

<nav>
  <button (click)="toggle()">Toggle Status</button>
</nav>

<div [@slideStatus]="status" class="box">
  {{ status == 'active' ? 'Active' : 'Inactive' }}
</div>

:host {
  display: block;
}

.box {
  width: 300px;
  border: 5px solid black;
  display: block;
  line-height: 300px;
  text-align: center;
  font-size: 50px;
  color: white;
}

// 通配符的使用，关于这个动画的通配符我理解为一个占位符；

import {
  Component,
  Input,
  Output,
  EventEmitter
} from '@angular/core';
import {
  trigger,
  state,
  style,
  animate,
  transition
} from '@angular/animations';

import { Hero } from './hero';

@Component({
  selector: 'app-hero-list-auto',
  templateUrl: 'hero-list-auto.component.html',
  styleUrls: ['./hero-list-page.component.css'],
  animations: [
    trigger('shrinkOut', [
      state('in', style({ height: '*' })), // 定义一个未知高度
      transition('* => void', [ // 当值移除/html元素离开这个页面触发
        style({ height: '*' }), // 获取要移除的html元素高度
        animate(250, style({ height: 0 })) // 动画执行，将高度变为0
      ])
    ])
  ]
})
export class HeroListAutoComponent {
   @Input() heroes: Hero[];

   @Output() remove = new EventEmitter<number>();

   removeHero(id: number) {
     this.remove.emit(id);
   }
}

<ul class="heroes">
  <li *ngFor="let hero of heroes"
      [@shrinkOut]="'in'" (click)="removeHero(hero.id)">
      <div class="inner">
        <span class="badge">{{ hero.id }}</span>
        <span>{{ hero.name }}</span>
      </div>
  </li>
</ul>

angular+ 动画——关键帧动画keyframe()

猜你喜欢