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>