如何使用 Angular2 动画更改 flex-layout？

Question

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

我在我的项目中使用 @angular/flex-layout 库来创建整洁的页面布局。问题来了：如何为我的 flex 布局增加和减少元素的宽度设置动画？ 例如：

我的页面上有 3 个 "columns"：

在第一个状态它们的宽度是：容器的 38%、52%、10%
并且在第二状态它们的宽度是：50%, 25%, 25%

就像图片中的一样（这些是其他州的相同列）

问题：我应该如何进行过渡以动画改变列的宽度？我可以使用哪些方法和属性？代码应该是什么样的？

=====

@编辑：

我发布了我的 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);
  }

}

我知道我可以通过简单的方式更改 div 的样式。但是我不想改变风格。我想更改元素的 fxFlex 属性。

谁能帮帮我？可能吗？？

Answer 1

您实际上不需要 angular 动画，您可以创建一个 <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

如何使用 Angular2 动画更改 flex-layout？

How to change flex-layout using Angular2 animations?

angular

animation

typescript

angular2-animation