在轉換後更改屬性

在轉換完成後，是否有方法可以在瞬間更改某個屬性並同時更改另一個屬性？在轉換後更改屬性

我想將元素的height從0過渡到100%。當height是0，我希望它的overflow爲hidden，並且當height達到100%時，我希望它的overflow成爲auto。

我嘗試這樣做：

#foo{ 
    height: 0; 
    overflow: hidden; 
    transition: height 0.25s; 
} 

#foo.some-state{ 
    height: 100%; 
    overflow: auto; 
}

這將導致奇效。如果最終狀態以足夠的高度結束以至於不需要滾動條，則會發生什麼情況是在height: 0處首先不存在滾動條。然後在轉換開始時出現，並在轉換期間維持高度不足。當高度變得足夠時，滾動條再次消失。

在這種情況下，我希望滾動條在轉換過程中不出現。換句話說，當轉換完成時，我想overflow從hidden切換到auto。如何才能做到這一點？

來源

2015-02-24 sawa

這不可能通過CSS轉換單獨。有'transitionend'事件可以讓你對JS做出反應。如果你不想這樣做，你可以設置'overflow：scroll'來代替，從一開始就會出現一個滾動條。使用動畫而不是過渡可能是另一種方式。 – CBroe 2015-02-24 03:04:30

@Croro我會接受，如果你這樣做的答案。 – sawa 2015-02-24 03:14:12

@CarySwoveland我只是碰巧看到了。這是很好，你參與。我也喜歡在那裏提出建議。 – sawa 2015-12-14 08:48:03

這不可能通過CSS單獨轉換。如果您不想使用其他任何東西，則可以設置overflow:scroll，以便從頭開始顯示滾動條。

這裏有transitionend事件，它允許您用JS對轉換結束做出反應。所以，只需一個小小的處理函數，你就可以添加overflow:auto（或者爲此設置一個類）。使用animation而不是轉換可能是另一種方式。您將需要在每個關鍵幀中指定overflow，因爲overflow是一個無法插值的屬性，因此會從動畫中完全刪除。

來源

2015-02-24 03:22:53 CBroe

在轉換後更改屬性

回答

相關問題