angular+ 动画；

最近项目第一阶段已经出来了；开始做收尾优化工作，于是这里准备处理下路由动画的；

然后在官网上看文档，然后自己做个笔记；

angular animation梳理

1.在根模块导入 BrowserAnimationsModule，它能把动画能力引入 Angular 应用的根模块中,并在imports导入声明；
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';


2. 把动画功能函数导入组件文件中：import {
  trigger,
  state,
  style,
  animate,
  transition
  // ...
} from '@angular/animations';

3.在需要使用动画的组件下，添加元数据属性，如：
@Component({
  selector: 'app-root',
  templateUrl: 'app.component.html',
  styleUrls: ['app.component.css'],
  animations: [
    // animation triggers go here
  ]
})

// angular 动画基础：
1)样式
// style():指定html部分的动画css样式，样式属性为小驼峰命名；
style({
    opacity: 0.5,
    backgroundColor: 'red'
})

2）样式命名
//    state():创建可命名的css样式，在转换到该命名状态时，应用对应的style样式；state()和style()联用，
//    可以通过切换/引用state名称来切换显示不同样式；
//如：
state('open',style({    // 定义一个名叫 open状态的函数并指定对应的style样式；
    height: '200px',
    opacity: 1,
    backgroundColor: 'yellow'
}))
state('closed', style({ // 定义一个名叫 open状态的函数并指定对应的style样式；
  height: '100px',
  opacity: 0.5,
  backgroundColor: 'green'
}))

3）增加转场动画,使得各个状态样式平滑过渡
//    transition(): 动画转场修饰，通过改变时间和动画顺序让各个state()状态, 第一个参数：定义两个转场state()方向；第二个参数为animate()函数；
//    animate ('duration delay easing')：
//    定义指定的转场时序信息，第一个参数为：持续时间，延迟时间，缓动效果（ease-in（先快后慢）,ease-out（先慢后快）,ease-in-out（先慢中加速后慢）; 第二个参数：单个样式函数style/多步订定义keyframes()
//    如：
 transition ('* => open, closed => open', [ // 定义转场方向，从*(任意)状态到open状态时，使用这个动画，该动画持续1s使得目标透明度为0；多个状态对会共用样式
        animate ('1s',
          style ({ opacity: '0' }),
        ),
      ]), 

4）触发动画
// trigger(): 命名动画，该动画包括了一些state()和transitions等；并绑定到触发动画的元素上
// 当元素上该触发器绑定的值变化时，触发绑定的动画；元素可以同时触发多个触发器，但元素任意时刻只能处于一个状态；
// 如：
    
 animations: [ // 在元数据中，触发openClose触发器，从open转场到close,close=>open；
    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')
      ]),
    ]),
  ],


5）将触发器绑定在html的元素上
// <div [@triggerName]="expression">...</div>;  expression的值为state()状态；
// 如：
<div [@openClose]="isOpen ? 'open' : 'closed'" class="open-close-container">
  <p>The box is now {{ isOpen ? 'Open' : 'Closed' }}!</p>
</div>

整体代码如下：

 关于导入模块；可以放在根模块下，也可以放在单独模块下；（因为官网的文档是没有目录分级的；而正常项目是有会根据不同项目理念进行不同模块的分级；暂时先这么处理，等我吃透了再回来修改；）

简单目录结构：

import { Component, OnInit } from '@angular/core';
import { trigger, state, style, animate, transition } from '@angular/animations';
@Component({
  selector: 'app-animation-test',
  templateUrl: './animation-test.component.html',
  styleUrls: ['./animation-test.component.scss'],
  animations: [
    trigger('openClose', [
      state(
        'open',
        style({
          height: '200px',
          opacity: 1,
          backgroundColor: 'yellow'
        })
      ),
      state(
        'close',
        style({
          height: '100px',
          opacity: 0.5,
          backgroundColor: 'red'
        })
      ),
      transition('open => close', animate('1s')),
      transition('close => open', animate('0.5s'))
    ])
  ]
})
export class AnimationTestComponent implements OnInit {
  isOpen = true;
  constructor() {}

  ngOnInit() {}

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

<button (click)="toggle()">切换</button>
<div [@openClose]="isOpen ? 'open' : 'close'" class="animation-container">
  <p>hello world</p>
</div>

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

angular animation梳理
1.在根模块导入 BrowserAnimationsModule，它能把动画能力引入 Angular 应用的根模块中,并在imports导入声明；import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

2. 把动画功能函数导入组件文件中：import {  trigger,  state,  style,  animate,  transition  // ...} from '@angular/animations';
3.在需要使用动画的组件下，添加元数据属性，如：@Component({  selector: 'app-root',  templateUrl: 'app.component.html',  styleUrls: ['app.component.css'],  animations: [    // animation triggers go here  ]})
// angular 动画基础：1)样式// style():指定html部分的动画css样式，样式属性为小驼峰命名；style({opacity: 0.5,backgroundColor: 'red'})
2）样式命名//state():创建可命名的css样式，在转换到该命名状态时，应用对应的style样式；state()和style()联用，//可以通过切换/引用state名称来切换显示不同样式；//如：state('open',style({// 定义一个名叫 open状态的函数并指定对应的style样式；height: '200px',opacity: 1,backgroundColor: 'yellow'}))state('closed', style({ // 定义一个名叫 open状态的函数并指定对应的style样式；  height: '100px',  opacity: 0.5,  backgroundColor: 'green'}))
3）增加转场动画,使得各个状态样式平滑过渡//transition(): 动画转场修饰，通过改变时间和动画顺序让各个state()状态, 第一个参数：定义两个转场state()方向；第二个参数为animate()函数；//animate ('duration delay easing')：//定义指定的转场时序信息，第一个参数为：持续时间，延迟时间，缓动效果（ease-in（先快后慢）,ease-out（先慢后快）,ease-in-out（先慢中加速后慢）; 第二个参数：单个样式函数style/多步订定义keyframes()//如： transition ('* => open, closed => open', [ // 定义转场方向，从*(任意)状态到open状态时，使用这个动画，该动画持续1s使得目标透明度为0；多个状态对会共用样式        animate ('1s',          style ({ opacity: '0' }),        ),      ]), 
4）触发动画// trigger(): 命名动画，该动画包括了一些state()和transitions等；并绑定到触发动画的元素上// 当元素上该触发器绑定的值变化时，触发绑定的动画；元素可以同时触发多个触发器，但元素任意时刻只能处于一个状态；// 如： animations: [ // 在元数据中，触发openClose触发器，从open转场到close,close=>open；    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')      ]),    ]),  ],

5）将触发器绑定在html的元素上// <div [@triggerName]="expression">...</div>;  expression的值为state()状态；// 如：<div [@openClose]="isOpen ? 'open' : 'closed'" class="open-close-container">  <p>The box is now {{ isOpen ? 'Open' : 'Closed' }}!</p></div>