Angular style()用法

[deepthan]

style : 样式设置

function style(
            tokens: '*' |
            {[key: string]: string | number} |
            Array<'*'|{[key: string]: string | number}>
         ): AnimationStyleMetadata;

style声明一个包含CSS属性/样式的键值对。

style({ width: 100, height: 0 })

Auto-styles（自适应样式）： style值可以用 '*' 来表示，自动达到其原本的样式，举个例子你就明白作用了：

如果一个div它实际宽度是100px，高度为100px，让它高度从0 到100px变化

<div class='demo'></div>
...
.demo{
    width: 100px;
    height: 100px;
}

这时候用 '*'来写

 animations: [trigger(
      'autoHeight',
      [
        state('void', style({height: '0px'})),
        state('*', style({height: '*'})),
        transition('void => *',  animate(500))
      ])],

它就会在 500ms内 高度从 0 搭配100px。咦，似乎没感觉到什么作用...
在高度为动态获取的值时候就看到其强大了：data为动态获取的{ height: xxx }

<div class='demo' [ngStyle]="{'height':data.height}">
</div>
...
.demo{
    width: 100px;
}

 animations: [trigger(
      'autoHeight',
      [
        state('void', style({height: '0px'})),
        state('*', style({height: '*'})),
        transition('void => *',  animate(500))
      ])],

这样在 500ms 高度自动到达设定的值。