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 类中使用什么来使按钮也向左移动，但保持在边缘，所以我可以按它呢？我尝试使用translate和calc，但是使用元素自己的宽度/高度进行翻译工作，所以它不能真正起作用。我怎样才能翻译，但相对于父母？谢谢！

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

可能需要一些调整（使用保证金）。

＆＃13;

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

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

CSS：相对于父div进行翻译

1 个答案: