jquery - 使用 translateX 100% 转换一个 div，然后将它推回到 View 中 x 个像素

Question

我正在尝试制作自己的推送导航，我正在使用 translateX 将内容推送到右侧以显示导航。

我遇到的问题是，我不希望将内容 100% 推到右侧，并让其中的一小部分显示在右侧。

我无法指定确切的像素数量，因为它需要响应。我以为我可以做的是将它转换为 100%，然后以某种方式将它拉回 50px，但我不知道该怎么做。

$(document).on('click','.wrapper span', function() {
  $('.wrapper').addClass('active');
});

html, body {
  height:100%;
}
.wrapper {
  background:red;
  height:100%;
}
.wrapper span {
  width:50px;
  height:50px;
  background:yellow;
}
.wrapper.active {
  transform:translateX(100%);
}
.navigation {
  position:absolute;
  background:#666666;
  color:#ffffff;
  top:0px;
  left:0px;
  bottom:0;
  z-index:-1;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
  i am a wrapper
  <span>click me</span>
</div>

<div class="navigation">
  i am a nav
</div>

DEMO

Answer 1

您是否尝试过为此使用 calc？ (浏览器分割支持here)

相关代码:

.wrapper.active {
  transform:translateX( calc(100% - 50px) );
}

完整示例如下:

$(document).on('click','.wrapper span', function() {
  $('.wrapper').addClass('active');
});

html, body {
  height:100%;
}
.wrapper {
  background:red;
  height:100%;
}
.wrapper span {
  width:50px;
  height:50px;
  background:yellow;
}
.wrapper.active {
  transform:translateX( calc(100% - 50px) );
}
.navigation {
  position:absolute;
  background:#666666;
  color:#ffffff;
  top:0px;
  left:0px;
  bottom:0;
  z-index:-1;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
  i am a wrapper
  <span>click me</span>
</div>

<div class="navigation">
  i am a nav
</div>

您还可以像这样将转换链接在一起:

.wrapper.active {
  transform:translateX(100%) translateX(-50px);
}

此方法的完整示例:

$(document).on('click','.wrapper span', function() {
  $('.wrapper').addClass('active');
});

html, body {
  height:100%;
}
.wrapper {
  background:red;
  height:100%;
}
.wrapper span {
  width:50px;
  height:50px;
  background:yellow;
}
.wrapper.active {
  transform:translateX(100%) translateX(-50px);
}
.navigation {
  position:absolute;
  background:#666666;
  color:#ffffff;
  top:0px;
  left:0px;
  bottom:0;
  z-index:-1;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
  i am a wrapper
  <span>click me</span>
</div>

<div class="navigation">
  i am a nav
</div>