Question

当按钮的文本更改时，我想为按钮的宽度设置动画。我知道我不能使用width auto来做到这一点。

我的想法是基本上在按钮本身上使用Ref，获取它的clientWidth，然后更改CSS变量以放置该宽度。然后，我将使用该变量来定义宽度。

由于某种原因，宽度设置正确，但是动画不起作用。如果我在Chrome Developer Tools上编辑CSS并将宽度从200px更改为400px，则可以使用...但是，当我将其设置回CSS变量，然后更改内部文本时，即使CSS变量已正确更新，动画不起作用。

.button {
width: var(--buttonwidth);
transition: width 2s ease-in-out;
}

// When children(text) changes, update css variable
  useEffect(() => {
    const buttonInnerWidth = buttonRef.current.clientWidth;
    document.documentElement.style.setProperty(
      '--buttonWidth',
      `${buttonInnerWidth}px`
    );
    console.log(buttonInnerWidth);
  }, [children]);

有人对此有更好的主意吗？

Answer 1

这是一个简单的示例，可在单击按钮时更改按钮的宽度。您可以将此监听器更改为您想要的其他任何内容

示例代码：

$(document).ready(function(){
$("button").css({"width":$("button").text().length*10});
  $("button").click(function(){
    var str = " activated ";
    var strWidth = str.length*10;
    $(this).css({"width":strWidth}).text(str);
  });
});

button{
height: 40px;
transition: 0.4s;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button>press</button>

Answer 2

这也是另一种方式。与Hooman Namazi的解决方案几乎相同，但方法却稍有不同。检查一下：

jQuery(function ($) {
		$("button").css({"width":$("button").text().length*10});
    var text = ['first text', 'this is second text', 'and this one is third', 'Hi, I am forth'];
    //used to determine which is the next text to be displayed
    var counter = 0;
    var $button = $('button');
    //repeat the passed function at the specified interval - it is in milliseconds
    setInterval(function () {
        //display the text and increment the counter to point to next text item
        $changeText = $button.text(text[counter++]);
        $button.css({"width":$("button").text().length*10});
        //if it is the last text item in the array point back to the first item
        if (counter >= text.length) {
            counter = 0;
        }
    }, 2000);
})

body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}
button {
  background: #0084ff;
  border: none;
  border-radius: 5px;
  padding: 8px 14px;
  font-size: 15px;
  color: #fff;
  transition: 0.5s;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button>first text</button>

Answer 3

我不想使用JS来解决此问题，因为它具有性能方面的优势，因此始终检查按钮内文本的宽度并不是很好。最终使用width：自动，并在更改按钮内的文本时更改了最大宽度。

不是完美的解决方案，因为您不能给它超长的文本，但是对于我的用例来说，它很好用：D

您在这里：

.button {
   width: auto;
   white-space: nowrap;
   max-width: 15rem;
   transition: max-width 0.3s cubic-bezier(0.445, 0.05, 0.55, 0.95);

   &.loading {
     max-width: 30rem;
    }
}

文本更改时对按钮的宽度进行动画处理

3 个答案: