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

时间:2017-03-29 07:56:09

标签: angular animation typescript angular2-animation

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

我在项目中使用 @ angular / flex-layout 库来创建整洁的页面布局。这里有一个问题:如何设置我的flex布局增加和减少元素宽度的动画?例如:

simulate of animation states

我有3"列"在我的页面上:

  1. 第一个州中,他们的宽度是:38%,52%,10%的容器
  2. 并且处于第二状态,其宽度为:50%,25%,25%
  3. 就像在图片中一样(这些是其他州的相同列)

    问题:我应该如何转换为更改列宽度的动画?我可以使用哪些方法和属性?代码应该是什么样的?

    =====

    @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);
      }
    
    }
    

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

    任何人都可以帮助我吗?有可能??

1 个答案:

答案 0 :(得分:2)

您实际上并不需要角度动画,您可以创建一个<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