隱藏另一個元素後，CSS過渡到元素的平滑過渡。

問題：我可以使用CSS轉換來控制div如何移入由另一個div隱藏創建的騰空空間。隱藏另一個元素後，CSS過渡到元素的平滑過渡。

我在我的應用程序中出現和消失的元素（display：none）基於用戶設置的時間間隔。正如預期的那樣，顯示：無，有時候相鄰的元素會移動以佔據騰空的空間。

我不介意在這種情況下的舉動。我想控制它如何移動。我希望通過css過渡或其他方法移動，而不是簡單地移動到位。這可能嗎？

這是一個JS小提琴，通過點擊按鈕來說明場景。當#red隱藏時，我希望看到#blue逐漸移動到位。謝謝。

下面是在的jsfiddle代碼：

HTML

<div id="red"></div> 
<div id="blue"></div> 
<p> 
<button id="remove" type="button">Remove Red</button>

CSS

#red { 
    display: inline-block; 
    background-color: red; 
    height: 200px; 
    width: 200px; 
} 
#blue { 
    display: inline-block; 
    background-color: blue; 
    height: 200px; 
    width: 200px; 
}

的Javascript

$("#remove").on("click", function(event){ 
    if($('#remove').text()=="Remove Red") { 
     $('#red').fadeOut(); 
     $('#remove').html("Restore Red"); 
    }else { 
     $('#red').fadeIn(); 
     $('#remove').html("Remove Red"); 
    } 
});

來源

2013-07-03 Joel

你看過jQuery效果嗎？ http://jqueryui.com/effect/ – Learner

另外，http://jqueryui.com/resources/demos/effect/easing.html – Learner

謝謝，但我試圖避免添加jQuery UI，因爲我明白它不與Bootstrap相處得很好。希望有一個CSS唯一的解決方案。 – Joel

可以隱藏通過它滑動到0寬度的狀態爲紅色。這會導致正確的元素似乎滑入左側的位置。

$('#red').animate({width:'toggle'});可用於將其滑動到左側。

您也可以將#red包裝在另一個div中，然後淡入#red，然後滑動容器以合併視覺效果。

來源

2013-07-03 18:36:33 EWit

這是一個有趣的想法，我會調查。但是被刪除的元素可能在左邊，可能在上面，這樣可能會變得很難管理。這很可能是我希望解決方案太簡單了。 :) – Joel

那麼你也可以使用jQuery的slideUp（）/ slideDown（）方法。垂直解決方案。可悲的是，我不知道一個適用於任何方向的神奇通用選項。 – EWit

我必須玩它，但沿着這些線可能實際上爲我工作。當我說這是「高於」它不是真的，它只是包裝到下一行，所以這個主題的變化可能有助於平滑。我會繼續並將其標記爲答案。 – Joel

隱藏另一個元素後，CSS過渡到元素的平滑過渡。

回答

相關問題