Animar mudando a largura das palavras
Eu tenho uma frase onde eu desvanece em uma palavra e substituo-a por outra de uma matriz. No entanto, como as palavras variam em comprimento, a largura da frase muda abruptamente e resulta em uma transição instável.
Como posso animar a mudança de largura? Eu tentei adicionar uma transição para o contêiner da sentença em css, mas isso não funcionou. Eu apliquei a transição como1.5s all linear
, então deve estar animando a largura, assim como todo o resto, sempre que houver mudança. Alguma ideia?
$(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>
EDIT: Desculpe se eu não estava claro, eu só quero desaparecer a palavra, não a frase inteira. Eu estou tentando animar a largura para caber a nova palavra. Eu não quero alterar / adicionar elementos, apenas resolva com as tags atuais no lugar.