Html 显示子元素时调整元素大小时的转换

我正在尝试为显示子元素时自动调整大小的组件设置动画

我在对焦父div时显示/隐藏子元素。此div会自动调整大小，但我希望使其平滑。纯CSS3有可能吗

我已经尝试了几种方法：宽度/可见性转换、溢出-x:hidden、计算（）。。。我暂时找不到有效的解决办法。我不想使用类似jquery的方法（$.hide（）或其他方法）

下面是我想要设置动画的示例：

.chip{
显示：内联块；
位置：相对位置；
颜色：#7474；
线高：32px；
填充：0 12px；
背景色：#e4；
边界半径：5px；
}
.chip>i{
显示：无；
}
.chip:hover>i{
显示：内联块；
光标：指针；
}

动画

由于无法设置

显示

属性的动画，因此可以使用

最大宽度

和

过渡

来实现效果。

不透明度

用于添加淡入效果

.chip{
显示：内联块；
位置：相对位置；
颜色：#7474；
线高：32px；
填充：0 12px；
背景色：#e4；
边界半径：5px；
垂直对齐：中间对齐；
}
.chip>i{
显示：内联块；
最大宽度：0em；
不透明度：0；
过渡：最大宽度.5s，不透明度.5s；
溢出：隐藏；
垂直对齐：中间对齐；
}
.chip:hover>i{
最大宽度：2米；
不透明度：1；
}

动画

由于无法设置

显示

属性的动画，因此可以使用

最大宽度

和

过渡

来实现效果。

不透明度

用于添加淡入效果

.chip{
显示：内联块；
位置：相对位置；
颜色：#7474；
线高：32px；
填充：0 12px；
背景色：#e4；
边界半径：5px；
垂直对齐：中间对齐；
}
.chip>i{
显示：内联块；
最大宽度：0em；
不透明度：0；
过渡：最大宽度.5s，不透明度.5s；
溢出：隐藏；
垂直对齐：中间对齐；
}
.chip:hover>i{
最大宽度：2米；
不透明度：1；
}

动画

非常有魅力！没有尝试最大宽度，只有“宽度”，我觉得很傻。。。谢谢工作起来很有魅力！没有尝试最大宽度，只有“宽度”，我觉得很傻。。。谢谢