将具有自动宽度的 div 定位在屏幕左侧

Question

注意：sn-p 中的这个 css 不完全等于我的设置（我在 body 中固定了 div），但在其他方面它的效果相同。我有自动宽度的 div（里面的文本），它从左侧打开。我想关闭它，使其向左动画到其全宽减去 50px。当屏幕宽度大于元素宽度时，这很好用，但是当它更小时，我的元素已经被压扁，所以当我在按钮点击时进行计算时，宽度不正确，当我动画出来时，它没有达到预期位置（因为它会随着向左的更多空间扩展至其自然宽度）。

我该如何解决这个问题？

var b = $('.b')

document.querySelector('#toggle').addEventListener('click', function() {



  var w = b.outerWidth(true),
    pos = w - 50
  console.log(w)

  b.stop().animate({
    'left': -pos + 'px'
  }, {
    duration: 350
  });

})

.a {
  border: 1px solid #333;
  width: 200px;
  position: relative;
}

.b {
  background: #ddd;
  max-width: 300px;
  padding: 50px;
  text-align: center;
  position: absolute;
}

#toggle {
  position: absolute;
  left: 400px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="a">
  <div class="b">

    <div class="t">Lorem ipsum dolor sit amet</div>
    <div class="t">Ut laoreet hendrerit mi.</div>
    <div class="t">Lorem ipsum dolor sit amet</div>

  </div>
</div>

<a href="#" id="toggle">toggle</a>

Answer 1

• 不要使用 jQuery
• 使用 CSS 和 transform translate 和 transition 获得所需的动画
• 使用 JavaScript Element.classList.toggle() 所需的 CSS 类 — 这会将元素从左 -100%（其自身宽度）转换为左 0%。
• 如果您确实需要一个按钮，请使用<button type="button">。锚点用于其他用途（导航）。

const EL = (sel, par) => (par||document).querySelector(sel);

EL("#toggle").addEventListener("click", () => {
  EL("#menu").classList.toggle("is-open");
});

/* QuickReset */
* {
  margin: 0;
  box-sizing: border-box;
}

#toggle {
  position: fixed;
  right: 0;
  padding: 1rem;
  /* hopefully you know how to style a Button */
}

#menu {
  position: fixed;
  padding: 30px;
  width: calc(100vw - 100px); /* or whatever you want, does not matters */
  height: 100vh;
  background: gold;
  transition: transform 0.5s; /* transition property and duration */
  transform: translateX(-100%); /* -100% of self-width (hidden) */
}

#menu.is-open {
  transform: translateX(0%); /* (visible) */
}

<div id="menu">I am something that actually toggles</div>

<button type="button" id="toggle">Toggle</button>