javascript - 文本更改时按钮的动画宽度

Question

我想在按钮的文本更改时为按钮的宽度设置动画。我知道我不能使用 width auto 来执行此操作。

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

由于某种原因，宽度设置正确，但动画不起作用。如果我在 Chrome 开发者工具上编辑 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>