移除同级容器后动画 fxFlex 宽度变化

Question

我有一个简单的布局，它由两列（侧面板和内容）组成，如演示中所示。当通过角度:leave 动画移除侧面板时，另一个容器将从65% 拉伸到100% 宽度。这是通过fxFlex 属性完成的。这里发生的情况是，当侧面板的动画开始时，内容已经被拉伸到 100%，而当动画结束时，内容会产生丑陋的跳跃。

当我尝试为过渡设置动画时，动画总是在跳转之后运行，或者只是完全破坏了布局。如果我尝试通过 css 或直接在我的组件中使用超时来延迟转换，也会发生同样的情况。

作为替代方案，我尝试将侧面板的动画设置为零宽度。在这种情况下，它有点工作，但跳转仍然发生，只是这次是在 :enter 转换期间（动画被完全忽略）。

我怎样才能使过渡顺利？

Stackblitz demo

Answer 1

我对结果不满意，但您可以在没有角度动画的情况下做到这一点：

<div fxLayout="row" fxLayoutAlign="end center" class="fullScreen">
  <div fxLayout="column" fxLayoutAlign="center center" [style.transform]="panelShown ? 'translateX(0%)': 'translateX(-100%)'" fxFlex="35" class="green fullHeight">

  </div>
  <div fxLayout="column" fxLayoutAlign="center center" class="content" [fxFlex]="100"
  [style.min-width]="panelShown?'65%':'100%'">
    <div fxLayout="column" fxLayoutAlign="start start" class="blue">
    </div>
    <button (click)="toggle()">Toggle panel</button>
  </div>
</div>

在你的 CSS 中：

.content {
  transition: 2s cubic-bezier(0.35, 0, 0.25, 1);
}

.green {
  background: green;
  transition: 2s cubic-bezier(0.35, 0, 0.25, 1);
}

注意事项：

• fxLayoutAlign="end center"
• [style.transform]="panelShown ? 'translateX(0%)': 'translateX(-100%)'"
• [style.min-width]="panelShown?'65%':'100%'

Working DEMO

Answer 2

我想这就是你想要的。

https://stackblitz.com/edit/angular-j2p2kg?file=src/app/app.component.ts

诀窍在于flex 不允许您处理width。因此，我专注于更改 flex 值以及移除过渡，并将其全部交给 Angular 来处理。

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ],
  animations: [
      trigger('slidePanel', [
        state('leave', style({
          flex: '0 0 100%'
        })),
        state('enter', style({
          flex: '1'
        })),
          transition('* => leave',
              animate('300ms cubic-bezier(0.35, 0, 0.25, 1)' ),
          ),
          transition('* => enter', 
          animate('400ms cubic-bezier(0.35, 0, 0.25, 1)'),
          )
      ]),
    ]
})
export class AppComponent  {

  public panelShown = 'leave';

  public toggle() : void {
      this.panelShown = this.panelShown === 'enter' ? 'leave' : 'enter';
  }

}

<div fxLayout="row" fxLayoutAlign="end center" class="fullScreen">
  <div [@slidePanel]="panelShown" fxLayout="column" fxLayoutAlign="center center" fxFlex="35" class="green fullHeight">

  </div>
  <div fxLayout="column" fxLayoutAlign="center center" class="content" [fxFlex]="100">
    <div fxLayout="column" fxLayoutAlign="start start" class="blue">
    </div>
    <button (click)="toggle()">Toggle panel</button>
  </div>
</div>