CSS 转换父 div 内子 div 的宽度

【问题标题】：CSS transition the width of a child div inside a parent divCSS 转换父 div 内子 div 的宽度
【发布时间】：2017-10-19 14:01:33
【问题描述】：

我正在尝试使用 CSS 在 5 秒内使子 div 在父 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>

【问题讨论】：

标签： css width css-transitions parent-child transition

【解决方案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>

【讨论】：