フレックスボックスのサイドパネルをオフスクリーンで滑らかにスライドさせるにはどうすればいいですか？

Question

私は角度のある素材で作られたかなり単純なフレックスレイアウトを持っています。それはオフスクリーンでスライドできるサイドパネルを持っています。私は現在、それを処理するために負のマージンを使用しています。そのため、メインのコンテンツボックスは、幅の調整を伴う移動に続きます（works well）。ただし、アニメーションが滑らかではありません。どうやらそれは翻訳よりもグラフィックスレンダリングの仕組みのほうが面倒です。

translateXを使用して同じことを達成するにはどうすればよいですか？サイドバーの移動が簡単な角度指令とCSSで処理され

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

：ここに私のデモのレイアウトだ

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