Question

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

就我而言，我左边有一段文字保持不变，右边的文字会根据你所在的页面而改变。

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

这样的总宽度会因此而改变，并且会突然改变。

这是一个证明问题的方法。

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

我目前只是通过使用相对定位和翻译来修复左侧，但是如果我能够顺利过渡，我宁愿这样做。

感谢您的帮助！

Answer 1

而不是仅仅向右和向外褪色，你需要淡化整条线。

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

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

创建更难以阅读的意大利面条代码
创建用于更改this绑定的匿名包装函数在功能
不遵循W3C DOM Even Standards

而是使用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>

Answer 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>

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

2 个答案: