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

回答

相關問題