title: How to change flex-layout using Angular2 animations?
body: <p>I made my first steps in <em>@angular/animations</em> 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.</p>
  
  <p>I use <em>@angular/flex-layout</em> library in my project to create neat page layout. And here comes the question: <strong>How can I animate increasing and decreasing width of elements my flex layout?</strong> For example:</p>
  
  <p><a href="https://i.stack.imgur.com/DXxOF.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/DXxOF.png" alt="simulate of animation states"></a></p>
  
  <p>I have 3 "columns" on my page:</p>
  
  <ol>
  <li>In the <strong>first state</strong> their width is: 38%, 52%, 10% of container</li>
  <li>and in the <strong>second state</strong> their width is: 50%, 25%, 25%</li>
  </ol>
  
  <p>just like in the picture (these are the same columns in other states)</p>
  
  <p>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?</p>
  
  <p>=====</p>
  
  <p>@EDIT: </p>
  
  <p>I publish fragment of my HTML code to present which attribute I want change (<strong>fxFlex</strong>)</p>
  
  <p><strong>app.component.html</strong></p>
  
  <pre><code>&lt;div class="flex-container"
      fxLayout="row"
      fxLayout.xs="column"
      fxLayoutAlign="end none"
      fxLayoutAlign.xs="end none" class="container-style"&gt;
  
      &lt;!-- first column --&gt;
      &lt;div class="flex-item" fxFlex="38%" fxShow.xs="false" class="one" [@oneState]="state"&gt;&lt;/div&gt;
  
      &lt;!-- second column --&gt;
      &lt;div class="flex-item" fxFlex="52%" class="two" [@twoState]="state"&gt;&lt;/div&gt;
  
      &lt;!-- third column --&gt;
      &lt;div class="flex-item" fxFlex class="three"&gt;&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>for <strong>app.component.ts</strong></p>
  
  <pre><code>@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 =&gt; active', animate('100ms ease-in')),
        transition('active =&gt; 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 =&gt; active', animate('100ms ease-in')),
        transition('active =&gt; 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);
    }
  
  }
  </code></pre>
  
  <p>I know that I can change styles of div in simple way. But i <strong>don't want to change style</strong>. I would like to <strong>change a fxFlex attribute</strong> of element.</p>
  
  <p>Anyone can help me? Is it possible??</p>