transition: 0.5s e setTimeout 500 | JavaScript: programando na linguagem da web

1
resposta

por DOUGLAS RAPHAEL CARDOSO SILVEIRA

| 77.7k xp | 5 posts

Se eu mudar o valor da transition do CSS terei que mudar o valor no setTimeout no JS.

Tem como eu capturar o valor do transition e jogar numa variável e depois manipular para jogar no JS .


fadeOut {
    opacity: 0;
    transition: 0.5s;
}
tipo assim
var milesegundos= fadeOut.transition.value;
milesegundos=  uma função que pegue so o valor numérico e converte para milesegundos;

setTimeout(function() {
        event.target.parentNode.remove();
    }, 500);

setTimeout(function() {
        event.target.parentNode.remove();
    }, milesegundos);

é possível? var milesegundos= fadeOut.transition.value;) milesegundos= uma função que pegue so o valor numérico e converte para milesegundos

1 resposta

por Gabriel Leite

| 3484k xp | 5398 posts

Instrutor

06/02/2020

Boa tarde, Douglas! Como vai?

O correto nesse caso é utilizar um evento do JavaScript chamado transitionend que é ativado quando uma transição termina, qualquer que seja o tempo de duração dela. O código ficaria mais ou menos assim:

const elementoComTransicao = // Seleciona o elemento que terá a transição.

elementoComTransicao.addEventListener('transitionend', () => {
     // Lógica a ser executada ao final da transição.
});

Para saber mais: https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/transitionend_event

Pegou a ideia? Qualquer coisa é só falar!

Grande abraço e bons estudos, meu aluno!