javascript - CSS - 当按钮平行于按钮右边框延伸时，让文本来自左侧

Question

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

目前我只有扩展按钮。为了说明，它是一个无限循环。

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>

标签： javascripthtmlcss

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>