Transition in CSS sequentially

Question

Transition in CSS sequentially

Navigation

#1 by (1 votes)
#2 by (0 votes)

0

I'm developing a quiz where Divs transactions are done via CSS. The problem is that the transaction of adding the next Div is being executed in parallel to the withdrawal of the current one. I would like to just start the animation of " removecontainer " at the end of the animation " addContainer ".

Is it possible to make this piece of code run sequentially?

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

javascript jquery css

asked by anonymous 19.07.2016 / 19:00

2 answers

1

In this case it will be a bit 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 see more or less what you 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><divclass="block block-first"></div>
    <div class="block block-second"></div>

However, you can take a look at When .

I hope I have helped.

19.07.2016 / 20:10

Search system error with php Protractor test, how to get an md-button?

score 0 · Accepted Answer

Good morning, Mate. One way to do this is to give the function a little timeout so that it only runs after the animation finishes.

Let's say 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 the timeout, it is expected that the function will only start after you finish your animation.