setTimeout

Boa noite! Como vai?

Na realidade, fazer algo aparecer lentamente seria feito com CSS. Não seria o setTimeout() que faria isso. Vc pode ver que a remoção do elemento de forma animada foi feita toda baseada no CSS feito nessa aula.

Pegou a ideia? Qualquer coisa é só falar!

Grande abraço e bons estudos!

e como eu faço isso ?

Oi Leveditor, tudo bem? Me fala melhor o que você quer fazer pra gente bolar um pseudo-código aqui explorando a ideia por favor?

boa tarde, eu fiz um código bem simples com um botão e input que imprime na tala o que foi digitado no input, e eu quero que quando clicado nesse botão o resultado apareça lentamente, só que na aula o conteúdo é removido lentamente, e eu gostaria de saber como aparecer lentamente

HTML

 <div class='container'>
 <input type='text' id='input'>
 <button id='button'>click</button>

 <p id='p'></p>
</div>

JS

var botao = document.getElementById('button');

botao.addEventListener('click', () =>{

    var input = document.getElementById('input').value;

    document.getElementById('p').innerHTML = input;
});

Então, uma forma de fazer é criar duas classes, uma que esconde o elemento e outra que mostra o elemento.

.invisible{
  opacity: 0;
}

.visible{
  opacity: 1;
  transition: all 2s;
}

No HTML, deixei o elemento com a classe que deixa o elemento invisível.

<p id='p' class="invisible"></p>

Ai no JS, tudo que precisamos fazer é adicionar a classe que faz o elemento aparecer com a transição:

var botao = document.getElementById('button');

botao.addEventListener('click', () =>{

  var input = document.getElementById('input').value;
  var p = document.getElementById('p'); 

  p.innerHTML = input;
  p.classList.add('visible');
});

boa tarde, quando escrevo algo no input ele não aparece dentro do p, copie e colei para não ter nenhum erro mas ainda não esta funcionando

e no console não aparece nenhum erro

Oi, não sei que browser você está usando, etc. Mas eu criei o arquivo com o código exatamente assim e funcionou:

<style>
.invisible{
  opacity: 0;
}

.visible{
  opacity: 1;
  transition: all 2s;
}
</style>

<div class='container'>
 <input type='text' id='input'>
 <button id='button'>click</button>

 <p id='p' class="invisible"></p>
</div>

<script>
var botao = document.getElementById('button');

botao.addEventListener('click', () =>{

  var input = document.getElementById('input').value;
  var p = document.getElementById('p'); 

  p.innerHTML = input;
  p.classList.add('visible');
});

</script>

Estou usando o Chromium.