如何平滑地将 flexbox 侧面板滑出屏幕？

Question

我有一个基于 Angular Material 构建的相当简单的 flex 布局。它有一个可以滑出屏幕的侧面板。我目前正在使用负边距来处理这个问题，以便主内容框通过宽度调整跟随其移动，works well。但是，这会导致动画不流畅。显然，图形渲染机制比翻译更麻烦。

如何使用translateX 完成相同的操作？这是我的演示布局：

<div ng-app="sandbox" layout="row" class="wrapper" ng-class="{'sidebar-out': sidebarOut}">
    <div flex="60" class="main md-padding">
        <h1>Main Content</h1>
        <button class="toggler" ng-click="sidebarOut=!sidebarOut">Toggle sidebar</button>
    </div>

    <div flex="40" class="sidebar md-padding">
        <h2>Sidebar</h2>
    </div>
</div>

侧边栏的移动由简单的 Angular 指令和 CSS 处理：

.sidebar-out .sidebar {
    transform: translateX(40vw)
}

Fiddle demo

问题在于主内容框没有调整大小，因为侧边栏在屏幕外平移。我怎样才能做到这一点？非常感谢。

Answer 1

这有帮助吗？ - Fiddle

我认为可能有更好的方法来做到这一点......

.sidebar-out .main {
    transform: scaleX(1.7)
}

标记

<div ng-app="sandbox" layout="row" class="wrapper" ng-class="{'sidebar-out': sidebarOut}">
    <div id="newMain" flex="60">
      <div id="mainContent">
        <h1>Main Content</h1>
        <button class="toggler" ng-click="sidebarOut=!sidebarOut">Toggle sidebar</button>
      </div>
      <div class="main md-padding">
      </div>
    </div>

    <div flex="40" class="sidebar md-padding">
        <h2>Sidebar</h2>
    </div>
</div>

CSS

.wrapper {
    background: pink;
    overflow: hidden;
}
#newMain {
  position: relative;
  width: 100vw;
  height: 100vh;
}
#mainContent {
  position: absolute;
  z-index: 1;
}
.sidebar,
.main {
    height: 100vh;
}
.main {
    background: #fff;
    transition: all .5s;
    transform-origin: 0 0;
}
.sidebar-out .main {
    transform: scaleX(1.7)
}

.sidebar {
    background: #ddd;
    transition: all .5s;
}
.sidebar-out .sidebar {
    transform: translateX(40vw)
}