Javascript 设置修改/更改文本时移动的HTML对象的动画

我有以下代码：

这里的文本

这是一个有趣的小问题。让我把它分解成几个步骤：

查找图像的当前位置

找到它需要移动到的位置

移动它

更改文本

现在，最难的部分是步骤2和3

对于步骤2，您必须计算新文本的长度。这很棘手，因为没有内置函数来告诉您给定样式集的文本宽度。您几乎必须创建一个重复的元素并对其进行测量

对于步骤3，必须在文本更改之前或之后移动元素，而不会导致跳转。我这样做的方法是使用

position:absolute

并将

left

设置到当前位置（从而消除任何抖动）。然后，为了提高性能，我使用

transform

（做一点数学来说明当前位置）转换到正确的位置。在转换结束时，去掉

style

属性并更改文本

另一件需要注意的事情是，当图像变成

位置：绝对时，文本会跳来跳去。为了简单起见，我将整行代码放在一个
display:flex
容器中。如果不想使用flex，可以在文本上使用
内联块
或
块
，并调整填充/高度，以保持适当的空间量

以下是我的想法（也是关于）：


var$img=document.getElementById（'user'）；
var$text=document.getElementById（'textToChange'）；
var$estimator=document.getElementById（'estimator'）；
var extraWidth=$img.offsetLeft-$text.offsetWidth；
函数估计（文本）{
$estimator.textContent=文本；
var宽度=$estimator.offsetWidth；
$estimator.textContent=''；
返回宽度；
}
document.getElementById（'change-text'）
.addEventListener（'单击'，函数（））{
var newText=randomText（）；
var left=$img.offsetLeft；
$img.style.position='absolute'；
$img.style.left=left+'px'；
$img.style.transition='transform linear 1s'；
$img.style.transform='translateX（0）'；
window.requestAnimationFrame（函数（）{
$img.style.transform='translateX（+（超宽+估计（新文本）-左）+'px'；
setTimeout（函数（）{
$text.textContent=newText；
$img.removeAttribute（'style'）；
}, 1000);
});
});
//用于测试
函数randomText（）{
var length=Math.floor（Math.random（）*43）+3；
返回“Lorem ipsum dolor sit amet portris noc tefweep.”切片（0，长度）；
}
h2{
位置：相对位置；
高度：100px；
显示器：flex；
对齐项目：柔性端；
}
/*用于测量文本宽度。我不想让别人看到*/
.未显示{
可见性：隐藏；
颜色：透明；
位置：绝对位置；
z指数：-1；
}

此处文本
更改文本
Hi！请参阅以及如何创建，我们需要能够帮助您。你可以用你的代码制作一个片段，试着把它制作成动画，然后专门问我们这个问题吗？编辑应该很好，我对你想要的东西有点困惑：你想要一个在另一个之上，一个根据另一个改变它的宽度吗？你想让它怎么移动？想象一下：这是文本，字母X是图像，这是文本X，当我把它改成其他的东西，例如这是其他的东西X，你看到X的位置改变了，我想把这个位置改变成动画。所以你在#textToChange中有一个文本，当这个文本动态变化时，它会碰撞图像（因为它是内联的）。您希望对碰撞设置动画，而不是即时动画。两件事：1）是什么改变了文本？有没有这样的JS？2） 为什么您的代码将图像和文本分别放在不同的跨距中，而文本在后面？这难道不意味着文本永远无法移动图像吗？