Javascript 设置2个flexbox div的动画

我在flexbox容器中有两个div，它们都是并排开始的。通过移除其中一个div，另一个div将在容器内居中

我似乎找不到从居中/非居中进行动画转换的方法。有没有办法做到这一点

HTML:

JS:

以下是我到目前为止所拥有的JSFIDLE:

---

原因是您的函数fadeIn首先使不透明度降低而不让块消失，然后才让块消失

我会这样做：这意味着，让淡出手动，同时减少宽度。您可以选择调用

Element.style.display='none'setTimeout（function（）{/*code here*/}，500）在500毫秒后编码>


var显示=[true，true]；
功能切换（div）
{
如果（div==“a”）
{
如果（显示[0]）
{
//$（'a'）。渐弱（500）；
document.getElementById（'a'）.style.opacity=0；
document.getElementById（'a'）.style.width='0px'；
}
其他的
{
//$（'a'）。法代因（500）；
document.getElementById（'a'）.style.opacity=1；
document.getElementById（'a'）.style.width='200px'；
}
显示的[0]=！显示的[0]；
}
其他的
{
如果（显示[1]）
{
//$（#b'）。淡出（500）；
document.getElementById（'b'）.style.opacity=0；
document.getElementById（'b'）。style.width='0px'；
}
其他的
{
//$（'b'）。法代因（500）；
document.getElementById（'b'）.style.opacity=1；
document.getElementById（'b'）.style.width='200px'；
}
显示的[1]=！显示的[1]；
}
}
#换行{
宽度：400px；
高度：200px；
边框：1px灰色虚线；
显示器：flex；
证明内容：中心；
}
#a、 #b{
-webkit过渡：不透明度500ms，宽度500ms；
-moz过渡：不透明度500ms，宽度500ms；
过渡：不透明度500ms，宽度500ms；
}
#a{
宽度：200px；
高度：200px；
背景色：红色；
}
#b{
宽度：200px；
高度：200px；
背景颜色：绿色；
}

切换红色


切换为绿色
原因是您的函数fadeIn首先使不透明度降低而不让块消失，然后才让块消失

我会这样做：这意味着，让淡出手动，同时减少宽度。您可以选择调用
Element.style.display='none'setTimeout（function（）{/*code here*/}，500）在500毫秒后编码>


var显示=[true，true]；
功能切换（div）
{
如果（div==“a”）
{
如果（显示[0]）
{
//$（'a'）。渐弱（500）；
document.getElementById（'a'）.style.opacity=0；
document.getElementById（'a'）.style.width='0px'；
}
其他的
{
//$（'a'）。法代因（500）；
document.getElementById（'a'）.style.opacity=1；
document.getElementById（'a'）.style.width='200px'；
}
显示的[0]=！显示的[0]；
}
其他的
{
如果（显示[1]）
{
//$（#b'）。淡出（500）；
document.getElementById（'b'）.style.opacity=0；
document.getElementById（'b'）。style.width='0px'；
}
其他的
{
//$（'b'）。法代因（500）；
document.getElementById（'b'）.style.opacity=1；
document.getElementById（'b'）.style.width='200px'；
}
显示的[1]=！显示的[1]；
}
}
#换行{
宽度：400px；
高度：200px；
边框：1px灰色虚线；
显示器：flex；
证明内容：中心；
}
#a、 #b{
-webkit过渡：不透明度500ms，宽度500ms；
-moz过渡：不透明度500ms，宽度500ms；
过渡：不透明度500ms，宽度500ms；
}
#a{
宽度：200px；
高度：200px；
背景色：红色；
}
#b{
宽度：200px；
高度：200px；
背景颜色：绿色；
}

切换红色


切换绿色
删除样式对齐内容：居中；它们将向左对齐。如果只显示一个，我希望它们居中。基本上……不<代码>调整内容
不可设置动画。必须将div的宽度设置为零，然后将其删除。这把小提琴做你想要的。删除样式对齐内容：中心；它们将向左对齐。如果只显示一个，我希望它们居中。基本上……不<代码>调整内容

不可设置动画。必须将div的宽度设置为零，然后将其删除。这把小提琴做你想做的。非常好的解决方案，我曾尝试使用设置的超时，但它仍然很快。这正是我要找的东西，谢谢！非常好的解决方案，我曾尝试使用一个设置的超时，但它仍然很快。这正是我要找的东西，谢谢！

<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>

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

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