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 动画方法来对旋转文本的宽度进行动画处理

这是供你演奏的小提琴

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>