如何在屏幕上平滑滑动弹性盒侧面面板

Question

我有一个相当简单的flex布局，建立在角材料上。它的侧面面板可以滑落在屏幕上。我目前正在使用负余量来处理该功能，以便主内容框以宽度调整效果很好，效果很好。但是，这导致动画不流畅。显然，对于图形渲染机制而不是翻译而言，它更像是一件琐事。

如何使用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>

侧栏运动用简单的角指令和CS处理：

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

小提琴演示

问题是，随着侧边栏在屏幕上翻译时，主内容框不会调整大小。我怎么能实现这一目标？谢谢堆。

Answer 1

这是否对此有所帮助？ - 小提琴

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

.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)
}