动画2柔性盒DIV

我在柔性盒容器中有2个DIV，它们都是并排开始的。通过删除其中一个div，另一个变成集中在容器内。动画2柔性盒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/

来源

2017-05-08 sam

删除样式证明内容致电500毫秒后Element.style.display = 'none';：中心;他们将向左对齐。 –

我希望它们居中，如果只显示一个。 – sam

本质上......没有。 'justify-content'不是可以动画的。您必须将div的宽度设置为零，然后将其删除。 –

之所以这样做，是因为你的函数在淡入淡出之前先让不透明度消失，然后才让它消失。

我会这样做：这意味着，让手动淡出并在同一时间减少宽度。可选的，你可以使用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>

来源

2017-05-08 14:24:09

非常好的解决方案，我曾尝试使用设置的超时时间，但它仍然相当活泼。这是我寻找的东西，谢谢！ – sam

动画2柔性盒DIV

回答

相关问题