javascript - CSS:如何在文本更改时向 div 宽度添加平滑移动？

Question

如果有人能比我更好地表达这个问题，请提出建议，我会修改(或自行编辑)。

这是我当前的 jsfiddle:https://jsfiddle.net/5v7mzadu/

我的 HTML:

<div class="text-cycler">
    WE <div class="c-text" id="ctext-1">CARE</div>
       <div class="c-text" id="ctext-2">THINK</div>
       <div class="c-text" id="ctext-3">SEE</div>
       <div class="c-text" id="ctext-1">KNOW</div>
</div>

我的 CSS:

.text-cycler {
     text-align:center;
     font-size:25px;
}
.c-text {
    display:inline-block
}

我的 Javascript:

var divs = $('div[id^="ctext-"]').hide(),
           i = 0;

(function cycle() { 

    divs.eq(i).fadeIn(400)
        .delay(1000)
        .fadeOut(400, cycle);

    i = ++i % divs.length;

})();

如您所见，第二个词淡入/淡出。我想向 div 添加平滑过渡，以便 div 容器的宽度不会突然改变宽度大小。 (这样宽度“扣”的更顺畅)

有人能帮忙吗？

Answer 1

我相信您需要内容和文本对齐中心的动画。 事实上，这必须解决您的目的。

我添加了 span{white-space: nowrap; vertical-align: text-top; 强制其在单行中对齐，并添加了 jQuery animate 方法来设置旋转文本宽度的动画

这是 fiddle供你玩耍

var divs = $('div[id^="ctext-"]').hide(),
  i = 0;

(function cycle() {
  divs.eq(i)
    .animate(400, function() {

      $('.x').animate({
        width: $(this).innerWidth()
      });
    })
    .fadeIn(400)
    .delay(1000)
    .fadeOut(400, cycle);
  i = ++i % divs.length;
})();

.text-cycler {
  text-align: center;
  font-size: 25px;
}

span {
  white-space: nowrap;
  vertical-align: text-top;
}

.c-text {
  display: inline-block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="text-cycler">
  <span> WE </span>
  <span class="x">
    <div class="c-text" id="ctext-1">CARE</div>
    <div class="c-text" id="ctext-2">THINK</div>
    <div class="c-text" id="ctext-3">SEE</div>
    <div class="c-text" id="ctext-1">KNOW</div>
  </span>
</div>