boa noite, como eu faço para que o setTimeout não remova e faça aparece algo bem lentamente igual na aula ?
Você está vendo a versão anterior da nova experiência da Alura que estamos preparando para você. Em breve, ela ganha uma identidade visual novinha totalmente pensada em potencializar seus estudos!
Solucionado
boa noite, como eu faço para que o setTimeout não remova e faça aparece algo bem lentamente igual na aula ?
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.