CSS-当Button平行于按钮的右边框延伸时，让文本从左侧出现

Question

我有一个可扩展的按钮，我希望按钮的文本与按钮的右边界平行移动，直到按钮扩展到最大宽度为止。因此，当按钮合拢并从左向右移动时，文本在右侧不可见。

目前，我只拥有Expending按钮。为了说明，这是一个无休止的循环。

const button = document.getElementById("myButton");

const toggleClass = () => {
  setTimeout(() => {
      button.className = button.classList.contains('btn1') ? 'btn btn2' : 'btn btn1';
      setTimeout(toggleClass, 100);
  }, 1500);
}

toggleClass();

.btn {
  background-color: yellow;
  width: auto;
  transition: all 1s linear;
  overflow: hidden;
  white-space: nowrap;
}

.btn1 {
  max-width: 1000px;
}

.btn2 {
  max-width: 5px;
}

<div>
  <button id='myButton' class='btn btn1'>Some text</button>
</div>

Answer 1

检查一下： https://jsfiddle.net/xpvt214o/579357/

此外，您还可以在此处运行代码段：

const button = document.getElementById("myButton");

const toggleClass = () => {
  setTimeout(() => {
      button.className = button.classList.contains('btn1') ? 'btn btn2' : 'btn btn1';
      setTimeout(toggleClass, 100);
  }, 1500);
}

toggleClass();

.btn { 
  background-color: yellow;
  width: 80px;
  height: 20px;
  transition: all 1s linear;
  overflow: hidden;
  white-space: nowrap;
  position: relative;
}

.btn span {
  right: 5px; 
  top: 0px;
  position: absolute;
}

.btn1 {
  max-width: 1000px;
}


.btn2 {
  max-width: 5px;
}

<div>
  <button id='myButton' class='btn btn1'><span>Some text</span></button>
</div>