CSS轉換父div內的子div的寬度

Question

我想使用CSS在5秒內將子div緩慢地從一個像素數量擴展到另一個像素數量（同時處於活動狀態）。這一定是可能的，對吧？我試圖做到這一點的方式不起作用。

#parent { 
 
    background: black; 
 
    height: 10px; 
 
    width: 300px; 
 
    z-index: 1; 
 
} 
 

 
#child{ 
 
    background: white; 
 
    z-index: 2; 
 
    height: 10px; 
 
    width: 10px; 
 
    transition: width 5s ease-out; 
 
} 
 
    
 
#parent:active #child{ 
 
    max-width: 290px; 
 
    transition: max-width 5s ease-in; 
 
}

<div id='parent'> 
 
    <div id='child'></div> 
 
</div>

Answer 1

你可以選擇改變width或max-width在活動狀態，所以在過渡您可以指定你想改變什麼。在你的代碼中，你定義了固定的width，然後你改變了max-width但是這並沒有做任何事情，因爲寬度仍然是一樣的。

#parent { 
 
    background: black; 
 
    height: 10px; 
 
    width: 300px; 
 
    z-index: 1; 
 
} 
 

 
#child{ 
 
    background: white; 
 
    z-index: 2; 
 
    height: 10px; 
 
    max-width: 10px; 
 
    transition: max-width 5s ease-out; 
 
} 
 
    
 
#parent:active #child{ 
 
    max-width: 290px; 
 
}

<div id='parent'> 
 
    <div id='child'></div> 
 
</div>