使用 translateX 100% 转换 div，然后将其推回到视图中 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>

Answer 2

您可以在 jQuery 中尝试使用隐藏和显示逻辑。初始化菜单和内容，但在开始时 (document.ready()) 隐藏菜单然后显示它 onclick 像这样

<div class="wrapper">
  i am a wrapper
  <span>click me</span>
</div>

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

包装器和导航必须紧挨着从导航开始的下一个

$(document).ready(function() {
    $('.navigation').hide();
    $('.wrapper').click(function() {
        $('.navigation').show(100);
    });    
});

这可以给你一些魔法，因为你不希望包装器和导航分离

Answer 3

使用负边距是一个非常好的技巧

.wrapper.active{
  position: relative
  left: 100%;
  margin-left: -50px;
}

编辑

没有相对定位

.wrapper.active{
  margin-left: calc(100% - 50px);
  margin-right: calc(-100% + 50px);
}

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

html,
body {
  height: 100%;
  margin: 0;
}
.wrapper {
  background: red;
  height: 100%;
}
.wrapper span {
  width: 50px;
  height: 50px;
  background: yellow;
}
.wrapper.active {
  margin-left: calc(100% - 50px);
  margin-right: 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>

使用 translateX 100% 转换 div，然后将其推回到视图中 x 个像素

Transform a div with translateX 100% then push it back into view by x amount of pixels

html

css

jquery

transform