2つのフレックスボックスDIVをアニメ化する

Question

フレックスボックスのコンテナに2つのDIVがあり、両方が並んでいます。 divの1つを削除すると、もう一方のdivはコンテナ内の中央になります。

私は、アニメーション化されたトランジションをセンタリング/非センタリングから作成する方法を見つけることができないようです。これを行う方法はありますか？

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]; 
    } 
} 

は、私がこれまで持っているもののためjsfiddleです：
https://jsfiddle.net/uvyLh8m9/6/

Answer 1

これは、関数fadeInが最初にブロックを消さずに不透明度を減らしてから消えさせるためです。

私はこのようにします。つまり、手作業でフェードアウトし、同じ時間に幅を減少させることです。オプションでは、スタイル正当化するコンテンツを削除し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>