Wie schiebe ich eine Flexbox-Seitenblende reibungslos aus dem Bildschirm?

Question

Ich habe eine ziemlich einfache Flex-Layout auf Angular Material gebaut. Es hat eine Seitenwand, die vom Bildschirm geschoben werden kann. Ich verwende derzeit negative Ränder, um das zu handhaben, so dass die Hauptinhaltsbox ihre Bewegung mit einer Breitenanpassung folgt, die works well ist. Dies führt jedoch zu einer nicht glatten Animation. Offensichtlich ist es für den Grafik-Rendering-Mechanismus mehr mühsam als für die Übersetzung.

Wie kann ich dasselbe mit translateX erreichen? Hier ist meine Demo-Layout:

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

Die Sidebar Bewegung mit einfachen Angular Richtlinien und CSS behandelt wird:

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

Fiddle demo

Das Problem ist, dass der Hauptinhalt Box nicht anpassen Größe wie die Seitenleiste außerhalb des Bildschirms übersetzt. Wie kann ich das erreichen? Tausend Dank.

Answer 1

Hilft dies überhaupt? - Fiddle

Ich denke, es kann ein besserer Weg, um dieses Bit zu tun wenn ...

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

Markup

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