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.
300px
no CSS, para depois animar para600px
?margin-left
(no CSS)?