CSS：相对于父 div 翻译

Question

我将此工具栏停靠在左侧。有一个小箭头显示/隐藏此工具栏（动画）。为了隐藏工具栏，我在另一个类中使用了一个简单的 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 类中有什么让按钮也向左移动，但要保持在边缘，所以我可以按下又来了？ 我尝试使用翻译和计算，但翻译使用元素自己的宽度/高度工作，所以它并没有真正起作用。我如何翻译，但相对于父母？谢谢！

编辑： 这是 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%;
}

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

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>