angular+ 动画——转场简化命名

1.部分简化别名

// 进入和离开视图动画：
// void => * 别名为 :enter    
// * => void 别名为    :leave    

// 由于可以使用:enter和:leave 来 从视图中插入或删除的html元素，所以可以配合使用*ngIf或*ngFor；
// 因为当*ngIf或*ngFor 中的元素渲染到视图页面中时，会触发:enter 转场，而元素移除时，会触发:leave转场；

如：

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

@Component({
  selector: 'app-insert-remove',
  animations: [
    trigger('myInsertRemoveTrigger', [
      transition(':enter', [ // :enter触发; 
        style({ opacity: 0 }), // 元素初始样式透明度为0
        animate('5s', style({ opacity: 1 })), // 设置动画，当元素渲染到视图时，在5s中将透明度变为1；
      ]),
      transition(':leave', [
        animate('5s', style({ opacity: 0 })) // 设置移除元素时的动画为5s过程中讲透明度变为0
      ])
    ]),
  ],
  templateUrl: 'insert-remove.component.html',
  styleUrls: ['insert-remove.component.css']
})
export class InsertRemoveComponent {
  isShown = false; // 变为true时，触发:enter; 变为false时，触发:leave

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

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

<div @myInsertRemoveTrigger *ngIf="isShown" class="insert-remove-container">
  <p>The box is inserted</p>
</div>

2.转场数值的增减；

// transition() 函数还能接受额外的选择器值：:increment 和 :decrement。当数值增加或减小时，使用这些来启动转场。

完整代码：

import { Component, HostBinding, OnInit } from '@angular/core';
import { trigger, transition, animate, style, query, stagger } from '@angular/animations';
import { HEROES } from './mock-heroes';

@Component({
  selector: 'app-hero-list-page',
  templateUrl: 'hero-list-page.component.html',
  styleUrls: ['hero-list-page.component.css'],
  animations: [
   // 进场 空值，当input输入值后，heroTotal 改变后；匹配相对应的状态并触发转场动画
    trigger('filterAnimation', [
      transition(':enter, * => 0, * => -1', []),
      transition(':increment', [
        query(':enter', [
          style({ opacity: 0, width: '0px' }),
          stagger(50, [
            animate('300ms ease-out', style({ opacity: 1, width: '*' })),
          ]),
        ], { optional: true })
      ]),
      transition(':decrement', [
        query(':leave', [
          stagger(50, [
            animate('300ms ease-out', style({ opacity: 0, width: '0px' })),
          ]),
        ])
      ]),
    ]),
  ]
})
export class HeroListPageComponent implements OnInit {
  @HostBinding('@pageAnimations')
  public animatePage = true;

  _heroes = [];
  heroTotal = -1;
  get heroes() {
    return this._heroes;
  }

  ngOnInit() {
    this._heroes = HEROES;
  }

  updateCriteria(criteria: string) {
    criteria = criteria ? criteria.trim() : '';

    this._heroes = HEROES.filter(hero => hero.name.toLowerCase().includes(criteria.toLowerCase()));
    const newTotal = this.heroes.length;

    if (this.heroTotal !== newTotal) {
      this.heroTotal = newTotal;
    } else if (!criteria) {
      this.heroTotal = -1;
    }
  }
}

<form>
  <input #criteria (input)="updateCriteria(criteria.value)" placeholder="Search Heroes" />
</form>    
<p>总数：{{heroTotal}}</p>
<ul class="heroes" [@filterAnimation]="heroTotal">
  <li *ngFor="let hero of heroes" class="hero">
    <div class="inner">
      <span class="badge">{{ hero.id }}</span>
      <span>{{ hero.name }}</span>
    </div>
  </li>
</ul>

.heroes {
  margin: 0 0 2em 0;
  list-style-type: none;
  padding: 0;
  width: 15em;
}

.heroes li {
  position: relative;
  height: 2.3em;
  overflow:hidden;
  margin: .5em;
}

.heroes li > .inner {
  cursor: pointer;
  background-color: #EEE;
  padding: .3em 0;
  height: 1.6em;
  border-radius: 4px;
  width: 19em;
}

.heroes li:hover > .inner {
  color: #607D8B;
  background-color: #DDD;
  transform: translateX(.1em);
}

.heroes a {
  color: #888;
  text-decoration: none;
  position: relative;
  display: block;
  width: 250px;
}

.heroes a:hover {
  color:#607D8B;
}

.heroes .badge {
  display: inline-block;
  font-size: small;
  color: white;
  padding: 0.8em 0.7em 0 0.7em;
  background-color: #607D8B;
  line-height: 1em;
  position: relative;
  left: -1px;
  top: -4px;
  height: 1.8em;
  min-width: 16px;
  text-align: right;
  margin-right: .8em;
  border-radius: 4px 0 0 4px;
}

.button {
  background-color: #eee;
  border: none;
  padding: 5px 10px;
  border-radius: 4px;
  cursor: pointer;
  cursor: hand;
  font-family: Arial;
}

button:hover {
  background-color: #cfd8dc;
}

button.delete {
  position: relative;
  left: 24em;
  top: -32px;
  background-color: gray !important;
  color: white;
  display: inherit;
  padding: 5px 8px;
  width: 2em;
}

input {
  font-size: 100%;
  margin-bottom: 2px;
  width: 11em;
}

.heroes input {
  position: relative;
  top: -3px;
  width: 12em;
}