我有一句话，想在其中一个单词消失之后用数组中的另一个单词替换它并进行渐变。但是，由于单词长度不同，句子宽度会突然改变，导致过渡不流畅。
我该如何动画化宽度的变化？我尝试在CSS中为句子的容器添加转换，但没有效果。我将转换应用为 1.5s all linear，因此每当发生更改时，它都应该动画化宽度以及其他所有内容。有什么想法吗？
$(function() {
var hello = ['dynamic', 'a', 'aklsjdlfajklsdlkf', 'asdf'];
var used = ['dynamic'];
var greeting = $('#what');
var item;
function hey() {
item = hello[Math.floor(Math.random() * hello.length)];
if (hello.length != used.length) {
while (jQuery.inArray(item, used) != -1) {
item = hello[Math.floor(Math.random() * hello.length)];
}
used.push(item);
} else {
used.length = 0;
item = hello[Math.floor(Math.random() * hello.length)];
used.push(item);
}
greeting.html(item);
greeting.animate({
"opacity": "1"
}, 1500);
}
window.setInterval(function() {
greeting.animate({
"opacity": "0"
}, 1500);
setTimeout(hey, 1500)
}, 5000);
});#sentence {
transition: 1.5s all linear;
}
#what {
font-style: italic;
text-decoration: underline;
color: red;
}<p id="sentence">
This is a sentence that has <span id="what">dynamic</span> text that alters width.
</p>
<script src="//ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>编辑：如果我表达不清楚，我只想淡化这个单词，而不是整个句子。我试图对宽度进行动画处理以适应新单词。我不想更改/添加任何元素，只是在当前标签中解决问题。
