html - 元素的宽度即时发生更改文本

Question

所以我正在尝试制作一个“随时间推移”的文本转换器，每隔几秒更改一个句子中的一个词，该代码运行良好，但当文本实际更改时，句子的宽度会立即改变，从而消除平滑度来自网站。

结构:

<div id="big">
  This is some <span id="change">text</span>
</div>

改变这个词是#change。我试过使用 CSS transitions 宽度以及 transition properties:

margin-top:   18%;
font-size:    70px;
font-family: 'Slabia 27px', 'Droid Serif', Arial;
>> text-align:   center;
text-transform: uppercase;

>> -webkit-transition-property: width;
>> -webkit-transition-duration: 2s;
>> transition: width .8s ease;

还有我的 jQuery(调用 APP.init()):

var APP = {
  init: function() {
    loopChangeWord = setInterval(function(){
      var $change = $('#change');
      var iteration = ['quick', 'efficiently', 'well', 'together'];
      var current   = $change.html();
      for (var i = 0; i < iteration.length; i++) {
        if (iteration[i] == current) {
          if (i+1 > iteration.length-1) var nw = iteration[0];
          else nw = iteration[i+1];
          $change.fadeOut(500, function(){
            $change.html(nw).fadeIn(500);
          });
        }
      }
    }, 4000);
  }
};

最后** 我要求一种方法来平滑过渡正在更改的文本，我希望宽度更改会触发 CSS 动画，你错了!

Answer 1

我必须更改您的 <span id="change">text</span> 中的 text 值匹配您的 var iteration = ['quick', 'efficiently', 'well', 'together']; 的任一值数组。

这是工作演示: https://jsfiddle.net/5p36n34j/1/

希望这对您有所帮助!