Javascript 在文本更改时设置按钮宽度的动画

我想在按钮的文本更改时设置按钮宽度的动画。我知道我不能用宽度自动来做这件事

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

由于某些原因，宽度设置正确，但动画不起作用。如果我在Chrome开发者工具上编辑CSS，并将宽度从200px更改为400px，它会工作。。。但是，当我将其设置回CSS变量，然后更改内部文本时，即使CSS变量得到正确更新，动画也无法工作

。按钮{
宽度：var（--按钮宽度）；
过渡：宽度2s，易于进出；
}

//当子项（文本）更改时，更新css变量
useffect（（）=>{
const buttonInnerWidth=buttonRef.current.clientWidth；
document.documentElement.style.setProperty(
“--按钮宽度”，
`${buttonInnerWidth}px`
);
控制台。日志（按钮宽度）；
}，[儿童]；

---

有谁对如何做有更好的想法吗？

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

示例代码：

$（文档）.ready（函数（）{
$（“按钮”）.css（{“宽度”：$（“按钮”）.text（）.length*10}）；
$（“按钮”）。单击（函数（）{
var str=“已激活”；
var strWidth=str.length*10；
$（this.css（{“width”：strWidth}）.text（str）；
});
});
按钮{
高度：40px；
过渡：0.4s；
}

按
这也是另一种方式。与Hooman Namazi的解决方案几乎相同，但方法略有不同。
看看这个：


jQuery（函数（$）{
$（“按钮”）.css（{“宽度”：$（“按钮”）.text（）.length*10}）；
var text=['第一个文本'，'这是第二个文本'，'这是第三个'，'嗨，我是第四个'；
//用于确定下一个要显示的文本
var计数器=0；
变量$button=$（'button'）；
//以指定的间隔重复传递的函数-以毫秒为单位
setInterval（函数（）{
//显示文本并递增计数器以指向下一个文本项
$changeText=$button.text（text[counter++]）；
$button.css（{“宽度”：$（“按钮”）.text（）.length*10}）；
//如果它是数组中的最后一个文本项，则指向第一个项
如果（计数器>=文本长度）{
计数器=0；
}
}, 2000);
})
正文{
背景：#20262E；
填充：20px；
字体系列：Helvetica；
}
钮扣{
背景：#0084ff；
边界：无；
边界半径：5px；
填充：8px 14px；
字体大小：15px；
颜色：#fff；
过渡：0.5s；
}

第一个文本
我不想使用JS来修复这个问题，因为从性能上看，一直检查按钮内文本的宽度是不好的。最后使用了width:auto并在更改按钮内的文本时更改了最大宽度

这不是一个完美的解决方案，因为你不能给它超长的文本，但对于我的用例来说，它工作得很好：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;
    }
}

你能创建一个plunker/代码片段吗？是的，我知道我可以这样做。。。但在性能方面不是很好。我最终使用了“最大宽度”并设置了动画。然后使用宽度自动打开按钮