angular2-4 之动效-animation

trigger("myAnimationTrigger", [
       state(...),
       state(...),
       transition(...),
       transition(...)
])

state(‘A‘, style...)

//状态除了可以自己定义一个名字外，还有有很多特殊表示状态

*(通配符)状态
*(通配符)状态匹配任何动画状态
如：1、当该元素的状态从active变成任何其它状态时，active => *转场都会生效
    2、当在任意两个状态之间切换时，* => *转场都会生效，下图情况都会发行动效转场

void

void的特殊状态，它表示元素没有被附加到视图。这种情况可能是由于它尚未被添加进来或者已经被移除了

如：如当一个元素离开视图时，* => void转场就会生效，而不管它在离场以前是什么状态。下图state的两个状态‘void’和‘in’，发生转场情况

transition(‘A => B‘, animate...)
transition(‘A <=> B‘, animate...)
transition(‘* => *‘, animate...) 
transition(‘:enter‘, animate...)
transition(‘:leave‘, animate...)
transition(‘* => void‘, animate...)  也等于 :leave

transition(‘void => *‘, animate...)  也等于 :enter

transition((fromState, toState) => boolean, animate...) 还可以写方法判断哦 
transition(‘A => B‘,[style,animate]) style 也可以放进来哦.
transition(‘A => B‘,[animate,animate]) 数组 animate 会按序执行和 transition(‘A => B‘, sequence([animate,animate])) 是一样的 
transition(‘A => B‘,group([animate,animate])) 不想按序执行可以使用 group,表示里的动画同时进行。

style({backgroundColor: "red"})

animate("5s 10ms cubic-bezier(.17,.67,.88,.1)", style(...))

//duration= 5second
//delay=10ms
//easing= cubic-bezier (ease-out 等等 css 有的都可以放)
//最后加上 style 就可以动画了咯

//如果想按帧来执行可以这样做
animate("5s", keyframes([ 
    style({opacity: 0, offset: 0}),
    style({opacity: 1, offset: 0.3})
]))
//offset 0.3 是百分比  这里和css3的动画是一样意思，

group([
  animate("1s", { background: "black" }))
  animate("2s", { color: "white" }))
])

animate("5s", keyframes([
  style({ backgroundColor: "red", offset: 0 }),
  style({ backgroundColor: "blue", offset: 0.2 }),
  style({ backgroundColor: "orange", offset: 0.3 }),
  style({ backgroundColor: "black", offset: 1 })
]))

// 表示百分比，时间百分比
//如果在样式条目中没有使用“offset”值，则offset的值会自动计算

animate("5s", keyframes([
  style({ backgroundColor: "red" }) // offset = 0
  style({ backgroundColor: "blue" }) // offset = 0.33
  style({ backgroundColor: "orange" }) // offset = 0.66
  style({ backgroundColor: "black" }) // offset = 1
]))

sequence([
  style({ opacity: 0 })),
  animate("1s", { opacity: 1 }))
])
//其实默认就是按sequence进行的，所以上面也可以这样写 如下
[
  style({ opacity: 0 })),
  animate("1s", { opacity: 1 }))
]

let fadeAnimation = animation([
    style({ opacity: ‘{{ start }}‘ }),
    animate(‘{{ time }}‘,
    style({ opacity: ‘{{ end }}‘))
], { params: { time: ‘1000ms‘, start: 0, end: 1 }});

useAnimation(fadeAnimation, {
    params: {
      time: ‘2s‘,
     start: 1,
      end: 0
    }
})
//如下面我定一个动效用到上面的定义。

export const fadel = trigger("fadel",[
  transition("void=>*",[
    useAnimation(fadeAnimation, {
      params: {
        time: ‘2s‘,
        start: 0,
        end: 1
      }
    })
  ])
]);

//在下面的例子中，有一个容器元素包装了一系列被打印的项目
//由ngFor。容器元素包含稍后将设置的动画触发器
 //查询每个内部项目。

<!-- list.component.html -->
<button (click)="toggle()">Show / Hide Items</button>
<hr />
<div [@listAnimation]="items.length">
  <div *ngFor="let item of items">
    {{ item }}
  </div>
</div>

<!--list.component.ts>
@Component({
  templateUrl: ‘list.component.html‘,
  animations: [
  trigger(‘listAnimation‘, [
  transition(‘* => *‘, [ // each time the binding value changes
    query(‘:leave‘, [
      stagger(100, [
        animate(‘0.5s‘, style({ opacity: 0 }))
      ])
    ]),
    query(‘:enter‘, [
      style({ opacity: 0 }),
      stagger(100, [
        animate(‘0.5s‘, style({ opacity: 1 }))
      ])
    ])
  ])
  ]
})
class ListComponent {
  items = [];
  showItems() {
    this.items = [0,1,2,3,4];
  }
  hideItems() {
    this.items = [];
  }
  toggle() {
    this.items.length ? this.hideItems() : this.showItems();
  }
}

//现在每次添加/删除项目，然后是不透明度
//淡入淡出的动画将会运行或每个删除的项目将淡出。
// 当这些动画中的任何一个出现时，交错效应将是
//在每个项目的动画开始之后应用。

// 下面的示例HTML代码显示了具有动画的父元素和子元素
// 触发器将在同一时间执行。

```html
<!-- parent-child.component.html -->
<button (click)="exp =! exp">Toggle</button>
<hr>
<div [@parentAnimation]="exp">
  <header>Hello</header>
  <div [@childAnimation]="exp">
      one
  </div>
  <div [@childAnimation]="exp">
      two
  </div>
  <div [@childAnimation]="exp">
      three
  </div>
</div>
```
//现在当`exp`值更改为true时，只有`parentAnimation`动画会生成动画
//因为它有优先权。但是，使用`query`和`animateChild`每个内部动画
//也可以触发：
// parent-child.component.ts
import {trigger, transition, animate, style, query, animateChild} from 
@Component({
  selector: ‘parent-child-component‘,
  animations: [
    trigger(‘parentAnimation‘, [
      transition(‘false => true‘, [
        query(‘header‘, [
          style({ opacity: 0 }),
          animate(500, style({ opacity: 1 }))
        ]),
        query(‘@childAnimation‘, [
          animateChild()
        ])
      ])
    ]),
    trigger(‘childAnimation‘, [
      transition(‘false => true‘, [
        style({ opacity: 0 }),
        animate(500, style({ opacity: 1 }))
      ])
    ])
  ]
})
class ParentChildCmp {
  exp: boolean = false;
}
```
//在上面的动画代码中，当“parentAnimation”转换开始时，它首先查询
//找到标题元素并淡入。然后找到包含该元素的每个子元素
//`@ childAnimation`触发器，然后允许他们的动画触发。

//这个例子可以进一步扩展使用交错：

query(‘@childAnimation‘, stagger(100, [
  animateChild()
]))

//现在每个子动画都是以“100ms”的蹒跚步骤开始的。
// ##第一帧子动画
//当使用animateChild执行子动画时，动画引擎将始终应用该动画
//动画序列开头的每个子动画的第一帧。这条路
//父动画不需要在子元素之前设置任何初始样式数据
//子动画开始。

//在上面的例子中，‘childAnimation‘的‘false => true‘转换的第一帧
//由“不透明度：0”的风格组成。这是在“parentAnimation”时立即应用的
//动画转换序列开始。只有当@ @ childAnimation被查询和调用时
//与`animateChild`将它动画到`opacity：1`的目的地。

//请注意，此功能旨在与{ @link  query query（）}一起使用，并且仅适用于此功能
//使用角度动画DSL分配的动画（这意味着CSS关键帧
//和转换不由这个API处理）

//当动画开始和结束时，会触发一个回调。

//对于例子中的这个关键帧，我们有一个叫做@flyInOut的trigger。在那里我们可以挂钩到那些回调，比如：

template: `
  <ul>
    <li *ngFor="let hero of heroes"
        (@flyInOut.start)="animationStarted($event)"
        (@flyInOut.done)="animationDone($event)"
        [@flyInOut]="‘in‘">
      {{hero.name}}
    </li>
  </ul>
`,
//这些回调接收一个AnimationTransitionEvent参数，它包含一些有用的属性，例如fromState，toState和totalTime。

//无论动画是否实际执行过，那些回调都会触发。
//注意： 动画结束名为“done”,不是“end”