如何使用Angular2动画更改弹性布局？

Question

在官方教程的帮助下，我在@ angular /动画中迈出了第一步。我添加了reqired库，并创建了我的第一个动画。我已经知道过渡和状态是什么。我可以创建简单的动画（改变背景颜色和变化分量的大小，

我用@角/柔性布局库在我的项目，以创造整洁的页面布局和来这里的问题：。我怎样才能动画增加和减少的元素的宽度我的Flex布局例如：

我有我的网页上3 “列”：

1. 在第一状态它们的宽度是：38％，52％，容器
2. 和在第二状态它们的宽度是10％：50％，25％，25％

只是就像在图片中一样（这些是其他状态下的相同列）

问题：我应该如何制作一个转换动画来更改列的宽度变化？我可以使用哪些方法和属性？什么代码应该看起来像？

=====

@EDIT：

我公布我的HTML代码片段呈现哪个属性我想改变（fxFlex）

app.component.html

<div class="flex-container" 
    fxLayout="row" 
    fxLayout.xs="column" 
    fxLayoutAlign="end none" 
    fxLayoutAlign.xs="end none" class="container-style"> 

    <!-- first column --> 
    <div class="flex-item" fxFlex="38%" fxShow.xs="false" class="one" [@oneState]="state"></div> 

    <!-- second column --> 
    <div class="flex-item" fxFlex="52%" class="two" [@twoState]="state"></div> 

    <!-- third column --> 
    <div class="flex-item" fxFlex class="three"></div> 
</div> 

对于app.component.ts

@Component({ 
    selector: 'app-root', 
    templateUrl: './app.component.html', 
    styleUrls: ['./app.component.css'], 
    animations: [ 
    trigger('oneState', [ 
     state('inactive', style({ 
     //I have no idea what I should use to change fxFlex attribute! 
     //Style? Maybe, something else? 
     })), 
     state('active', style({ 
     //I have no idea... 
     })), 
     transition('inactive => active', animate('100ms ease-in')), 
     transition('active => inactive', animate('100ms ease-out')) 
    ]), 
    trigger('twoState', [ 
     state('inactive', style({ 
     //I have no idea what I should use to change fxFlex attribute! 
     //Style? Maybe, something else? 
     })), 
     state('active', style({ 
     //I have no idea... 
     })), 
     transition('inactive => active', animate('100ms ease-in')), 
     transition('active => inactive', animate('100ms ease-out')) 
    ]), 
    ] 
}) 
export class AppComponent { 
    title = 'app works!'; 

    state: string = 'inactive'; 

    toggleMove() { 
    this.state = (this.state === 'inactive' ? 'active' : 'inactive'); 
    console.log(this.state); 
    } 

} 

我知道，我可以改变风格格的简单方法。但我不想改变风格。我想更改元素的fxFlex属性。

任何人都可以帮到我吗？可能吗？？

Answer 1

你实际上并不需要为这个角度动画，你可以创建一个<col>组件，如：

@Component({ 
    selector: "col", 
    styles:[` 
    :host{ 
    transition: width 300ms linear; 
    display:block; 
    } 
    `], 
    template:`<ng-content></ng-content>` 
}) 
export class ColComponent{ 
    @Input() 
    @HostBinding("style.width") 
    fxFlex:string; 
} 

，然后用它在你的应用程序模板像<col fxFlex="50%"></col>（请注意，您可以使用另一种selector像"div[flexible]"或任何...

我创建了一个plunker