Javascript 宽度更改（文本更改）时平滑移动居中项目（文本）

我想知道是否有一种方法可以使一个居中的项目在宽度改变时平稳移动

在我的例子中，左边的一段文字保持不变，右边的一段文字将根据您所处的页面而变化

<div id="title-container">
  <h1 class="inline-header">example.</h1>
  <h1 id="title-category" class="inline-header">start</h1>
</div>

例子。
开始

其总宽度将因此发生变化，并会突然移动

下面是一个jsfiddle演示这个问题

目前，我只是通过使用相对定位和平移来修复左侧，但如果我能获得平滑过渡，我宁愿这样做

---

谢谢你的帮助

您需要淡入淡出整行，而不是只淡入淡出正确的部分

而且，每个单词的变化不需要单独的函数。只有一个函数可以接受新词作为参数

最后，不要使用内联HTML事件属性来设置事件处理程序。它：

• 创建更难阅读的意大利面代码
• 创建匿名包装函数，以更改

  此

  绑定 职能范围内
• 甚至不遵循W3CDOM标准

而是在JavaScript中设置事件处理程序

var$titleContainer=$（“#标题容器”）；
变量$titleCategory=$（“#标题类别”）；
$（“按钮”）。单击（函数（）{change（this.textContent）；}）
功能更改（文本）{
$titleContainer.fadeOut（300，函数（）{
$titleCategory.text（text）；
$titleContainer.fadeIn（600）；
})
}

#标题容器，#按钮容器{文本对齐：居中；}
.inline头{display:inline block；}

例子。
开始
样品
你好
SampleX2

var$titleCategory=$（“#标题类别”）；
函数changeToSample（）{
$titleCategory.fadeOut（300，function（）{
$titleCategory.text（'sample'）；
$titleCategory.fadeIn（600）；
document.getElementById（'title-container'）.style.marginLeft=`calc（50%-14em/2）`；
})
}
函数changetohhello（）{
$titleCategory.fadeOut（300，function（）{
$titleCategory.text（'hello'）；
$titleCategory.fadeIn（600）；
document.getElementById（'title-container'）.style.marginLeft=`calc（50%-12em/2）`；
})
}
函数changeToDoubleSample（）{
$titleCategory.fadeOut（300，function（）{
$titleCategory.text（'samplesample'）；
$titleCategory.fadeIn（600）；
document.getElementById（'title-container'）.style.marginLeft=`calc（50%-20em/2）`；
})
}

#标题容器{
左边距：计算值（50%-12em/2）；
过渡：.2s；
}
#按钮容器{
文本对齐：居中；
}
.内联标题{
显示：内联块；
}

例子。
开始
样品
你好
SampleX2

呃，我有点想让左侧留下来。没有好办法吗？我试着用动画把整条线向左移动一半的距离，但还是有点跳跃。是的，我只是做了一个非常快速的例子来说明发生了什么，我通常有一个函数来更改标题以及加载特定页面的信息（SPA），所以我忘记了我不再需要单独的，以及jquery添加事件处理程序而不是内联。看起来很棒，谢谢！我尝试了一些非常类似的方法，但没有想到使用ems，我移动了左边的文本而不是容器。很抱歉，我的实现不准确。最好在js上计算块的宽度，并相应地调整我看到的边距leftAh，这样我仍然应该使用px进行计算。我认为关键是移动容器，而不是移动左侧文本。我来试试