Transition in CSS sequentially

Question

I’m developing a quiz where Divs transactions are done via CSS. The problem is that the transaction to add the next Div is running parallel to the withdrawal of the current one. I would like only at the end of the animation set in "removecontainer" begin the animation of "add".

It is possible to run this code snippet sequentially?

$containerOptions.eq(QUESTIONUMBER).addClass("removecontainer");
QUESTIONUMBER++;                
$containerOptions.eq(QUESTIONUMBER).addClass("adicionaContainer");

Answer 1

In this case it will be a little complex because you will work with the animations in CSS.
An alternative is to use setTimeout and delay to manipulate the duration time between animations.

I made a basic example for you to understand more or less what I said:

        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>

However you can take a look at When also.

I hope I’ve helped.

Answer 2

Good morning, Buddy. One way to do this is to give a little time in the function so it only runs after the animation is finished.

Let’s assume that your animation takes 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);

With timeout, the function is expected to start only after you finish your animation.