宽度变化（文本变化）时平滑移动居中的项目（文本）答案

【问题标题】：Smoothly moving a centered item (text) when width changes (text changes)宽度变化（文本变化）时平滑移动居中的项目（文本）
【发布时间】：2017-07-08 03:12:56
【问题描述】：

我想知道是否有办法让居中的项目在宽度变化时平滑移动？

就我而言，左侧的一段文字保持不变，右侧的一段文字会根据您所在的页面而变化。

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

它的总宽度会因此而改变，并且会突然移动。

这是一个演示问题的 jsfiddle。

https://jsfiddle.net/sm3j26aa/3/

我目前通过使用相对定位和平移来固定左侧来解决它，但如果我能获得平滑的过渡，我宁愿这样做。

感谢您的帮助！

【问题讨论】：

标签： javascript jquery html css jquery-ui

【解决方案1】：

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

此外，不需要为每个单词更改单独的函数。只要有一个函数接受新词作为参数。

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

创建更难阅读的意大利面条式代码
创建更改this 绑定的匿名包装函数函数内
不遵循 W3C DOM 甚至标准

改为在 JavaScript 中设置您的事件处理程序。

var $titleContainer = $('#title-container');
var $titleCategory = $('#title-category');

$("button").click(function(){ change(this.textContent); })

function change(text) {
  $titleContainer.fadeOut(300, function() {
    $titleCategory.text(text);
    $titleContainer.fadeIn(600);
  })
}

#title-container, #button-container { text-align: center; }
.inline-header { display: inline-block; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="title-container">
  <h1 class="inline-header left">example.</h1>
  <h1 id="title-category" class="inline-header">start</h1>
</div>
<div id="button-container">
  <button>Sample</button>
  <button>Hello</button>
  <button>SampleX2</button>
</div>

【讨论】：

嗯，我有点希望左侧留下来。有没有好的方法可以做到这一点？我试着让整个东西向左移动总线距离的一半，但它仍然有点跳跃。是的，我只是在做一个非常简单的例子来展示正在发生的事情，我通常有一个功能可以更改标题以及加载特定页面的信息（SPA），所以我忘记了我不再需要单独的，以及 jquery 添加事件处理程序而不是内联。

【解决方案2】：

var $titleCategory = $('#title-category');

function changeToSample() {
  $titleCategory.fadeOut(300, function() {
    $titleCategory.text('sample');
    $titleCategory.fadeIn(600);
    document.getElementById('title-container').style.marginLeft = `calc(50% - 14em/2)`;
  })
}

function changeToHello() {
  $titleCategory.fadeOut(300, function() {
    $titleCategory.text('hello');
    $titleCategory.fadeIn(600);
    document.getElementById('title-container').style.marginLeft = `calc(50% - 12em/2)`;
  })
}

function changeToDoubleSample() {
  $titleCategory.fadeOut(300, function() {
    $titleCategory.text('samplesample');
    $titleCategory.fadeIn(600);
    document.getElementById('title-container').style.marginLeft = `calc(50% - 20em/2)`;
  })
}

#title-container {
  margin-left: calc(50% - 12em/2);
  transition: .2s;
}

#button-container {
  text-align: center;
}

.inline-header {
  display: inline-block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="title-container">
  <h1 class="inline-header">example.</h1>
  <h1 id="title-category" class="inline-header">start</h1>
</div>
<div id="button-container">
  <button onclick="changeToSample();">Sample</button>
  <button onclick="changeToHello();">Hello</button>
  <button onclick="changeToDoubleSample();">SampleX2</button>
</div>

【讨论】：

看起来很棒，谢谢！我尝试了一些非常相似的东西，但没有想到使用 ems，我移动了左边的文本而不是容器 lol
对不起，我的实现不准确。在js上更好地计算块的宽度并相应调整margin-left
啊，我明白了，所以我仍然应该使用 px 计算。我认为关键是移动容器而不是移动左侧文本。我试试看