0

Estou desenvolvendo um quiz onde as transações das Divs são feitas via CSS. O problema é que a transação de adicionar a próxima Div esta sendo executada paralelamente a de retirada da atual. Gostaria que somente ao termino da animação setada em "removecontainer" começasse a animação de "adicionarContainer".

É possível fazer este trecho de código rodar sequencialmente?

$containerOptions.eq(QUESTIONUMBER).addClass("removecontainer");
QUESTIONUMBER++;                
$containerOptions.eq(QUESTIONUMBER).addClass("adicionaContainer");
1
  • Pode disponibilizar o HTML e CSS ? Commented 19/07/2016 às 17:27

2 Respostas 2

1

Nesse caso vai ser um pouco complexo pois você vai trabalhar com as animações em CSS.
Uma alternativa é usar setTimeout e delay para manipular o tempo de duração entre as animações.

Fiz um exemplo básico pra você ver entender mais ou menos o que disse:

        setTimeout(hideContainerFirst, 0);
        setTimeout(hideContainerSecond, 2000);

        function hideContainerFirst(){
            $(".block-first").addClass('hide-container');
        }
        function hideContainerSecond(){
            $(".block-second").delay(2000).addClass('hide-container');
        }
        .block{display: inline-table;width: 250px;height: 200px;background-color: #000;border:3px solid red;border-radius: 5px;margin: 5px;}
        .block.block-second{background-color: blue;}

        .hide-container{-webkit-animation: animate-hide-container 2s;}
        .show-container{-webkit-animation: animate-show-container 2s;}
        .hide-real{display: none;}

        @-webkit-keyframes animate-hide-container {
            from { opacity: 1;}
            to { opacity: 0;}
        }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="block block-first"></div>
    <div class="block block-second"></div>

Contudo você pode dar uma olhada em When também.

Espero ter ajudado.

1
  • Gostei desta opção pois a implementação do setTimeOut no topo do arquivo deixa o arquivo JS bastante limpo, obrigado!
    – Terry
    Commented 20/07/2016 às 15:26
0

Bom dia, Companheiro. Uma forma de se fazer isso é dando um timeoutzinho na função para ela só executar depois que a animação terminar.

Vamos supor que sua animação demora 300ms (0.3s).

$containerOptions.eq(QUESTIONUMBER).addClass("removecontainer");
QUESTIONUMBER++;
once = 0; //para garantir que só vai executar uma vez.
setTimeout(function()
{
    if(once == 0)
    {
    $containerOptions.eq(QUESTIONUMBER).addClass("adicionaContainer");
    once++;
    }
}, 300);

Com o timeout, espera-se que a função só inicie depois que terminar sua animação.

2
  • 1
    Não sei se esta é a melhor forma de se resolver o problema, já que exige sempre setar o tempo manualmente para cada ocorrencia, mas resolveu meu problema, obrigado!
    – Terry
    Commented 19/07/2016 às 18:18
  • Ora pois! Com certeza existe alguma forma muito melhor e superior para resolver seu problema, porém, essa aí é simples e funciona. De qualquer forma, de nada, companheiro. Commented 19/07/2016 às 18:43

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 .