Animating 2 flexbox DIVs

Question

I have 2 DIVs in a flexbox container, where they both start of side by side. By removing one of the divs, the other one becomes centered within the container.

I cant seem to find a way of making an animated transition from centered/uncentered. Is there any way of doing this?

HTML:

<div id='wrap'>

<div id='a'></div>
<div id='b'></div>

</div>

<button id='btna' onclick="toggle('a')">Toggle Red</button>
<br>
<button id='btnb' onclick="toggle('b')">Toggle Green</button>

CSS:

#wrap{
  width: 400px;
  height: 200px;
  border: 1px dashed grey;
  display: flex;
  justify-content: center;
}

#a{
  width: 200px;
  height: 200px;
  background-color: red;
}

#b{
  width: 200px;
  height: 200px;
  background-color: green;
}

JS:

var displayed = [ true, true ];

function toggle( div )
{
    if( div == 'a' )
    {
        if( displayed[0] )
        {
            $('#a').fadeOut(500);
        }
        else
        {
            $('#a').fadeIn(500);
        }
        displayed[0] = !displayed[0];
    }
    else
    {
        if( displayed[1] )
        {
            $('#b').fadeOut(500);
        }
        else
        {
            $('#b').fadeIn(500);
        }
        displayed[1] = !displayed[1];
    }
}

Here is a jsfiddle for what I have so far:
https://jsfiddle.net/uvyLh8m9/6/

Answer 1

The reason for this is that your function fadeIn first make decrease opacity without letting disappear the block, and only then, lets it disappear.

I would do it this way : which means, letting fade out manually and during the same time decreasing the width. Optionally you could call Element.style.display = 'none'; after 500ms using setTimeout(function(){/*code here*/}, 500);

var displayed = [ true, true ];

function toggle( div )
{
    if( div == 'a' )
    {
        if( displayed[0] )
        {
            //$('#a').fadeOut(500);
            document.getElementById('a').style.opacity = 0;
            document.getElementById('a').style.width = '0px';
        }
        else
        {
            //$('#a').fadeIn(500);
            document.getElementById('a').style.opacity = 1;
            document.getElementById('a').style.width = '200px';
        }
        displayed[0] = !displayed[0];
    }
    else
    {
        if( displayed[1] )
        {
            //$('#b').fadeOut(500);
            document.getElementById('b').style.opacity = 0;
            document.getElementById('b').style.width = '0px';
        }
        else
        {
            //$('#b').fadeIn(500);
            document.getElementById('b').style.opacity = 1;
            document.getElementById('b').style.width = '200px';
        }
        displayed[1] = !displayed[1];
    }
}

#wrap{
  width: 400px;
  height: 200px;
  border: 1px dashed grey;
  display: flex;
  justify-content: center;
}

#a, #b {
  -webkit-transition:opacity 500ms, width 500ms;
     -moz-transition:opacity 500ms, width 500ms;
          transition:opacity 500ms, width 500ms;
}

#a{
  width: 200px;
  height: 200px;
  background-color: red;
}

#b{
  width: 200px;
  height: 200px;
  background-color: green;
}

<div id='wrap'>

<div id='a'></div>
<div id='b'></div>
  
</div>

<button id='btna' onclick="toggle('a')">Toggle Red</button>
<br>
<button id='btnb' onclick="toggle('b')">Toggle Green</button>