CSS: 翻译相对于 parent div

Question

我将此工具栏固定在左侧。 shows/hides 这个工具栏（动画）有那个小箭头。为了隐藏工具栏，我在另一个 class.

中使用了一个简单的 css 转换

.graph-tools {
    background: rgba(255, 255, 255, 0.7);
    border-right: 1px solid #dcdcdc;

    overflow-x: hidden;
    overflow-y: auto;

    margin: 0;
    padding: 5px;

    height: 100%;
    width: 100%;

    transition: transform 1s;
    -webkit-transition: -webkit-transform 1s;
}

.graph-tools-hidden {
    -webkit-transform: translate(-100%, 0);
    transform: translate(-100%, 0);
}

小箭头的css如下：

.tools-container-toggler {
    position: absolute;
    right: 0;
    top: 10px;

    background-color: #4b98b1;
    border-radius: 100%;
    height: 22px;
    width: 22px;

    transition: transform 1s;
    -webkit-transition: -webkit-transform 1s;
}

.tools-container-toggler-hidden {
    ???
}

我的问题是：我应该在 .tools-container-toggler-hidden class 中添加什么来使按钮也向左移动，但保持打开状态边缘，所以我可以再按一次？我尝试使用 translate 和 calc，但 translate 使用元素自己的 width/height 工作，所以它实际上不起作用。我怎么翻译，可是相对于parent？谢谢！

编辑：这是 HTML.

的一部分

<div class="graph-tools-container-wrapper">
   <div class="graph-tools-container">
      <!-- The show/hide toolbar button -->
      <div class="tools-container-toggler"
         ng-class="{'tools-container-toggler-hidden': menuOptions.menuClosed}"
         ng-model="menuOptions.menuClosed" ng-click="menuOptions.menuClosed=!menuOptions.menuClosed">
         <i class="fa fa-arrow-right" style="font-size: 10px;" aria-hidden="true"
            ng-if="menuOptions.menuClosed"></i>
         <i class="fa fa-arrow-left" style="font-size: 10px;" aria-hidden="true"
            ng-if="!menuOptions.menuClosed"></i>
      </div>
      <div class="graph-tools" ng-class="{'graph-tools-hidden': menuOptions.menuClosed}">
         [....]
      </div>
   </div>
</div>

.graph-tools-container-wrapper {
    position: absolute;
    z-index: 1002;
    top: 0;
    left: 0;

    height: 100%;
    width: 20%;
}

.graph-tools-container {
    height: 100%;
    width: 100%;
}

第一个包装器是工具栏 'skeleton'，graph-tools 保留实际内容，容器用于帮助我隐藏 graph-tools。这个工具栏实际上并不在最左边（那里还有另一个菜单）所以这就是我使用它的原因。

Answer 1

希望这适合你。

我已将 position: relative; 添加到 .graph-tools-container。
那么它的子项 .graph-tools-container 的绝对定位将是相对于它的父项，而不是视口。

默认情况下，它位于 left: 100% 而不是 right: 0;
然后将其动画化为 left: 0;

它可能需要一些调整（为此使用边距）。

$(function() {
  $('.graph-tools-container').on('click', function() {
    $('.graph-tools').toggleClass('graph-tools-hidden');
    $('.tools-container-toggler').toggleClass('tools-container-toggler-hidden');
  });
});

.graph-tools-container-wrapper {
  position: absolute;
  z-index: 1002;
  top: 0;
  left: 0;
  height: 100%;
  width: 20%;
}

.graph-tools-container {
  position: relative;
  height: 100%;
  width: 100%;
}

.graph-tools {
  background: rgba(255, 255, 255, 0.7);
  border-right: 1px solid #dcdcdc;
  overflow-x: hidden;
  overflow-y: auto;
  margin: 0;
  padding: 5px;
  height: 100%;
  width: 100%;
  transition: transform 1s;
  -webkit-transition: -webkit-transform 1s;
}

.graph-tools-hidden {
  -webkit-transform: translate(-100%, 0);
  transform: translate(-100%, 0);
}

.tools-container-toggler {
  position: absolute;
  left: 100%;
  top: 10px;
  background-color: #4b98b1;
  border-radius: 100%;
  height: 22px;
  width: 22px;
  transition: all 1s;
  -webkit-transition: all 1s;
}

.tools-container-toggler-hidden {
  left: 0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="graph-tools-container-wrapper">
  <div class="graph-tools-container">
    <!-- The show/hide toolbar button -->
    <div class="tools-container-toggler">
      x
    </div>
    <div class="graph-tools">
      [....]
    </div>
  </div>
</div>

CSS: 翻译相对于 parent div

CSS: translate relative to parent div

css

animation

position

transform

translate