CSS 在父项 div 内转换子项 div 的宽度

Question

我正在尝试使用 CSS 让子 div 在父 div（激活时）内在 5 秒内从一个像素缓慢扩散到另一个像素。一定有可能吧？我尝试这样做的方式不起作用。

#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，因此在转换过程中您可以指定要更改的内容。在您的代码中，您定义了 fixed 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>

CSS 在父项 div 内转换子项 div 的宽度

CSS transition the width of a child div inside a parent div

css

transition

parent-child

width

css-transitions