html - 如何在显示为 :block/none on child elem 的父元素上设置宽度动画

Question

我在一个父元素中有两个 child ，其中第一个 child 始终可见，但第二个 child 仅在悬停时可见。因为当我将鼠标悬停在父元素展开时，我为父元素的宽度设置了适合内容。我需要的是这个扩展的平滑过渡。我在 React 中完成所有这些。谢谢
请检查上下文:

.parent{
  display: flex;
  justify-content: space-evenly;
  background-color: #f31d84;
  width: fit-content;
}
.icon{
  margin: 5px;
}
.text{
  display: none;
  margin: 5px;
}

.parent:hover .text{
  display: block;
}

<div>
  <div class='parent'>
    <div class='icon'>
      icon
    </div>
    <div class='text'>
      texttexttexttext
    </div>
  </div>
</div>

Answer 1

您无法为不是值的内容设置动画。我的意思是从 display: none至 display: block不能是动画，因为它们不是值。