Question

所以我试图随着时间的推移做出一个＆＃34;＆＃34;文本更换器每隔几秒就会更改一个单词中的单词，当文本实际更改时，该代码运行正常，句子的宽度会立即改变，从网站上删除平滑度。

结构：

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

更改一词是#change。我尝试将 CSS过渡用于宽度以及过渡属性：

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>中的文字值，以匹配var iteration = ['quick', 'efficiently', 'well', 'together'];数组的一个值。

以下是工作演示： https://jsfiddle.net/5p36n34j/1/

希望这有帮助！

Answer 2

以下是使用transition: all .8s ease;上的#change代替transition: width .8s ease;上的#big的示例。

var fontSize = 10;
$('#big').click(function() {	
	fontSize = fontSize * 2.2;
  $('#change').css('fontSize', fontSize + 'px');
})

body {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  margin: 0;
}
#big {
  margin-top: 18%;
  font-family: 'Slabia 27px', 'Droid Serif', Arial;
  text-align: center;
  text-transform: uppercase;
  font-size: 10px;
  cursor: pointer;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  border: solid black 1px;
  padding: 20px;
}
#change {
  transition: all .8s ease;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="big">
  Click on this <span id="change">text</span>
</div>

更改文本的元素宽度会立即发生

2 个答案: