0

O problema é que, quando eu atribuo uma transição a um elemento já "pintado" no DOM, ela ainda não está pronta para executar na instrução seguinte.

Vou ilustrar:

Suponhamos que eu tenho a classe "animar" e nessa classe tem uma transição.

.animar {
    transition: all 1s;
}

Caso eu atribua essa classe dinamicamente a um elemento do DOM, por meio de Javascript, e queira já usar a transição na instrução seguinte, eu não posso fazer. Seria assim:

var elemento = document.querySelector('#qualquercoisa');

// Atribuo a classe que contem a transição
elemento.classList.add('animar');

// Modifico o CSS do elemento, mas ele não é animado. O elemento é movido direto, sem nenhuma transição. 
elemento.style.marginLeft = '300px';

A forma que funciona:

Para que a transição execute, como é esperado, eu tenho que fazer assim:

 // Continuação do código acima
 setTimeout(function() {
   elemento.style.marginLeft = '600px';
 }, 10);

Ou seja: a transição só é executada se eu der um tempo depois de atribuir a classe, e então, setar as modificações de estilo que eu queira. Seria uma espécia de "tempo para o browser processar".

Eu fiquei encucado com isso, porque, como eu vou saber o tempo necessário para que o browser esteja pronto para executar uma animação naquele elemento? Não é possível que esse seja o jeito mais apropriado de fazer isso. Alguém poderia apontar alguma solução? Ou melhor: o jeito certo, porque eu cheguei nisso sozinho e tenho quase certeza que está errado... =P

Obrigado.

17
  • Porque é que não tens logo 300px no CSS, para depois animar para 600px?
    – Sergio
    Commented 10/10/2017 às 19:52
  • @Sergio Acho que não entendeu o problema. Do 0 para o 300 é onde está o bug, é onde o elemento não é animado. Eu apenas mudei para 600 para ilustrar que, depois do setTimeout, o elemento é animado normalmente do 300 até o 600. Commented 10/10/2017 às 19:54
  • @Sergio Havia também um erro no comentário do código. Era pra ser "Ele NÃO é animado". Corrigi. Commented 10/10/2017 às 19:56
  • "Do 0 para o 300 é onde está o bug" - ok, mas tens no CSS algum valor inicial para margin-left (no CSS)?
    – Sergio
    Commented 10/10/2017 às 19:58
  • @Sergio Não. O valor é o padrão; 0px. Commented 10/10/2017 às 19:59

1 Resposta 1

0

Para verificar quando a animação terminar, adicione addEventListener ao elemento que irá chamar um callback:

var div = document.querySelector('#div')
div.classList.add('animar');
div.style.marginLeft = '300px';
div.addEventListener("webkitTransitionEnd", callBack,false);
div.addEventListener("transitionend", callBack,false);
div.addEventListener("otransitionend", callBack,false);

window.onload = function(){
	var div = document.querySelector('#div')
	div.classList.add('animar');
	div.style.marginLeft = '300px';
	div.addEventListener("webkitTransitionEnd", callBack,false);
	div.addEventListener("transitionend", callBack,false);
	div.addEventListener("otransitionend", callBack,false);
}

function callBack(){
	alert("Fim");
}
.animar {
    transition: all 1s;
}

#div {
	width: 30px;
	height: 30px;
	background: red;
  }
<div id="div"></div>

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .