Question

我有一个简单的布局，其中包括两列（侧面板和内容），如演示中所示。当通过角度:leave动画移除侧面板时，另一个容器将从100%延伸到65%的宽度。这是通过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的值以及删除过渡，并将其全部留给角度处理。

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

移除同级容器后，对fxFlex宽度变化进行动画处理

2 个答案: