How to change flex-layout using Angular2 animations?

Question

I made my first steps in @angular/animations with help of official tutorial. I added reqired libraries and i create my first animation. I already know what transition and state is. I can create simple animations (changing background colors and changing size of elements.

I use @angular/flex-layout library in my project to create neat page layout. And here comes the question: How can I animate increasing and decreasing width of elements my flex layout? For example:

I have 3 "columns" on my page:

In the first state their width is: 38%, 52%, 10% of container
and in the second state their width is: 50%, 25%, 25%

just like in the picture (these are the same columns in other states)

Question: How should I make a transitions to animate changing width of columns? Which methods and attributes can I use? What code should look like?

=====

@EDIT:

I publish fragment of my HTML code to present which attribute I want change (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>

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

}

I know that I can change styles of div in simple way. But i don't want to change style. I would like to change a fxFlex attribute of element.

Anyone can help me? Is it possible??

n00dl3 · Accepted Answer · 2017-03-29T09:19:10.293

2

You don't actually need angular animations for this, you can create a <col> component, like this:

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

and then use it in your app template like <col fxFlex="50%"></col> (note that you can use another selector like "div[flexible]" or whatever...

I created a plunker

edited Mar 29 '17 at 09:19

answered Mar 29 '17 at 08:15

n00dl3

21,213
7
66
76

Oh, then you don't need to use angular animations :D – n00dl3 Mar 29 '17 at 08:45
1

Yo n00dl3! :D Thanks for your interest in the topic. I voted up your answer, but it isn't solution. It work only when I turn off FlexLayoutModule from my project. I wrote that I want to use @angular/flex-layout library to style page layout my project. Have you another ideas? – Jaroslaw K. Mar 30 '17 at 06:01
1

You can do this with a directive with a selector on `[FxFlex]`, it's more or less the same except you will need to set the styles directly on the element instead of a stylesheet... – n00dl3 Mar 30 '17 at 07:27

How to change flex-layout using Angular2 animations?

1 Answers1