建議的重復沒有解決這個問題的方法，不要著急關閉它。我是 CSS 專家。
我有 2 個元素具有相同的父元素，當第一個元素消失時display: none，第二個元素移動到頂部，取代第一個元素。
是否可以為第二個元素的移動添加過渡？
示例：https ://codepen.io/smarian/pen/VwQOaOm 單擊紅色塊使其消失，然后單擊綠色塊將其顯示回來。
謝謝
uj5u.com熱心網友回復：
由于您的 div 具有靜態高度，您可以在 CSSheight屬性上添加一個過渡：
document.querySelector(".first").onclick = function(event) {
this.classList = "first collapsed";
}
document.querySelector(".second").onclick = function(event) {
document.querySelector(".first").classList = "first";
}.first {
background: red;
height : 250px;
}
.second {
background : green;
height : 250px;
}
.collapsed {
height: 0;
transition: height ease-in-out 500ms;
overflow: hidden;
}<div>
<div class="first">My element</div>
<div class="second">Another element</div>
</div>uj5u.com熱心網友回復：
例如，您可以為 1 秒的高度設定影片，然后display:none使用 setTimeout 設定 a。由于您無法為dispaly屬性設定影片。
document.querySelector(".first").onclick = function(event) {
this.classList.add("hide");
setTimeout(()=>{
this.style.display="none";
},1000)
}
document.querySelector(".second").onclick = function(event) { document.querySelector(".first").removeAttribute("style")
}.first {
background: red;
height : 250px;
overflow:hidden;
transition:1s;
}
.first.hide{
height:0;
}
.second {
background : green;
height : 250px;
}<div>
<div class="first">My element</div>
<div class="second">Another element</div>
</div>uj5u.com熱心網友回復：
與上面的第一個答案基本相同，但使用 max-height 可以在兩個方向上獲得過渡/影片
document.querySelector(".first").onclick = function(event) {
this.style.maxHeight = 0;
}
document.querySelector(".second").onclick = function(event) { document.querySelector(".first").removeAttribute("style")
}.first {
background: red;
height: 250px;
max-height : 250px;
overflow: hidden;
transition: max-height 0.3s ease-in-out;
}
.second {
background : green;
height : 250px;
}<div>
<div class="first">My element</div>
<div class="second">Another element</div>
</div>轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/493392.html
標籤：javascript html css
上一篇：在角度中使用stylelint時忽略-webkit-box-shadow和-moz-box-shadow
下一篇：遞回回傳父級但不回傳子級