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

如何在屏幕外平滑地滑动Flexbox侧面板？

1 个答案: