Angular 2 + 折腾记 ：(10) 初步了解动画，以及一步一步写个动画效果

import {
  trigger, // 动画封装触发，外部的触发器
  state, // 转场状态控制
  style, // 用来书写基本的样式
  transition, // 用来实现css3的 transition
  animate, // 用来实现css3的animations
  keyframes // 用来实现css3 keyframes的
} from '@angular/animations';


export const fadeIn = trigger('fadeIn', [
  state('in', style({ display: 'none' })), // 默认元素不展开
  transition('void => *', [ // 进场动画
    animate(200, keyframes([
      style({ height: '0', opacity: 0, offset: 0 }), // 元素高度0，元素隐藏(透明度为0)，动画帧在0%
      style({ height: '*', opacity: 1, offset: 1 }) // 200ms后高度自适应展开，元素展开(透明度为1)，动画帧在100%
    ]))
  ]),
  transition('* => void', [
    animate(200, keyframes([
      style({ height: '*', opacity: 1, offset: 0 }), // 与之对应，让元素从显示到隐藏一个过渡
      style({ height: '0', opacity: 0, offset: 1 })
    ]))
  ]),
]);

// 这是写法2;我是把动画效果独立封装到对应的ts文件内，方便复用
import { fadeIn } from '../../../../../animation/fadeIn';
import { bounceIn } from '../../../../../animation/bounceIn';
@Component({
  selector: 'app-list',
  templateUrl: './list.component.html',
  styleUrls: ['./list.component.scss'],
  animations: [fadeIn, bounceIn] 
})

// 有人说为什么不直接写在代码内，比如下面这种写法
// 这种写法推荐在独立组件或者模块内，就是给第三方用，组件内部实现一个自己的过渡效果
// 若是对应系统来说，降低耦合度更方便我们维护，也就是我推荐上面那种写法的原因
@Component({
  selector: 'app-list',
  templateUrl: './list.component.html',
  styleUrls: ['./list.component.scss'],
  animations: [
    trigger('fadeIn', [
      state('in', style({ display: 'none' })), // 默认元素不展开
      transition('void => *', [ // 进场动画
        animate(200, keyframes([
          style({ height: '0', opacity: 0, offset: 0 }), // 元素高度0，元素隐藏(透明度为0)，动画帧在0%
          style({ height: '*', opacity: 1, offset: 1 }) // 200ms后高度自适应展开，元素展开(透明度为1)，动画帧在100%
        ]))
      ]),
      transition('* => void', [
        animate(200, keyframes([
          style({ height: '*', opacity: 1, offset: 0 }), // 与之对应，让元素从显示到隐藏一个过渡
          style({ height: '0', opacity: 0, offset: 1 })
        ]))
      ]),
    ])]
})

<!--不传递状态直接调用, 用@符号来引用对应的动画-->
<h3 *ngIf="list && list.length === 0" class="text-center text-muted" @fadeIn>暂无相关数据信息!!!</h3>
  </div>


<!--传递状态的，跟常规的绑定一致-->
<h3 *ngIf="list && list.length === 0" class="text-center text-muted" [@bounceIn]="list.state">暂无相关数据信息!!!</h3>