Css 带flex的ui路由器滑动侧栏

我希望能够有一个侧栏滑入。我已经快到了，但是当侧边栏滑入时，主视图卡入到位时，我遇到了一些问题。我创建这个来证明我遇到的问题。请注意车身如何不随侧板移动。我怎样才能使这项工作达到我的预期

正文：

---

不需要太多关于转换的细节。简单的答案是，翻译DOM元素对其他DOM元素没有影响

所以你有一个flexbox，里面有两个div。它们按预期运行。当您展开窗口时，左div将展开以填充，因为它设置为

flex:auto

，而右div保持固定宽度的

400px

当您

transform:translate

右侧div时，您所做的一切就是在视觉上移动它。它的容器，以及左边的div，仍然认为它正是它开始的地方。也就是说，直到您实际隐藏或删除它。当右侧div被隐藏时，您可以看到左侧div填充了flex box

---

因此，要实现您想要的效果，您需要为两个div设置动画，左手为大小，右手为平移。或者实际更改右侧div的宽度，允许

转换：所有2秒

为您处理动画。

多亏了@CH Buckingham，我想出了一个解决方案。这和我想象的不完全一样，但它工作得很好，真的没有那么粗糙。这允许您使用范围变量切换侧栏，但您可以使用

ui路由器

灵活设置内容

<div class="container">
  <div class="child">
    <a href ui-sref="main.sidePanel">show side panel</a>
  </div>
  <div ng-show="showSidebar" class="sidebar">
    <div ui-view class="uiview"></div>
  </div>
</div>

---

如果你要投反对票，至少要说明原因。

<div class="side-panel-body">
  <a href ui-sref="main">hide side panel</a>
</div>

.container {
  display: flex;
  height: 400px;
  padding: 20px 0;
}

.child {
  background: yellow;
  flex: auto;
}

.side-panel-body {
  width: 400px;
  height: 100px;
  background: lightgray;
}

.slide.ng-enter,
.slide.ng-leave {
  transition: all 2s ease;
}
.slide.ng-enter {
  transform: translate(100%, 0);
}
.slide.ng-enter-active {
  transform: translate(0, 0);
}
.slide.ng-leave {
  transform: translate(0, 0);
}
.slide.ng-leave-active {
  transform: translate(100%, 0);
}

<div class="container">
  <div class="child">
    <a href ui-sref="main.sidePanel">show side panel</a>
  </div>
  <div ng-show="showSidebar" class="sidebar">
    <div ui-view class="uiview"></div>
  </div>
</div>

.container {
    display: flex;
}

.child {
    flex: auto;
}

.sidebar {
    width: 1000px; // for some reason this acts more like a max-width for the sidebar. The actually width matches the size of the ui-view.

    &.ng-hide-add, &.ng-hide-remove {
        transition: all ease .8s;
        overflow-x: hidden;
    }

    &.ng-hide {
        width: 0;
    }
}