如何使用显示设置父元素宽度的动画:子元素上的块/无

Question

我在一个父元素中有两个子元素，其中第一个子元素始终可见，但第二个子元素仅在悬停时可见。因为当我悬停时，我已经为父元素的宽度设置了合适的内容，所以父元素展开。我需要的是一个平稳的过渡期来进行这次扩张。我在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

我设法找到了解决问题的方法。代码：

<div>
<div class='parent'>
<div class='icon'>
icon
</div>
<div className='text-wrapper'>
<div class='text'>
texttexttexttext
</div>
</div>
</div>
</div>
.parent{
display: flex;
justify-content: space-evenly;
background-color: #f31d84;
width: fit-content;
}
.icon{
margin: 5px;
}
.text{
opacity: 0;
max-width: 0;
margin: 5px;
transition: 5s ease;
}
.text-wrapper{
width: auto;
}
.parent:hover .text{
opacity: 1;
max-width: 1000px;
}

Answer 2

不能为非值设置动画。我的意思是，从display: none到display: block不能被动画化，因为它们不是值。

Answer 3

这是一个错误的实现。在这个例子中，父元素的宽度在悬停时不会改变。如果你想制作动画，一个好的做法是将子元素的宽度设置为0，当父元素悬停在类text中时，div将获得父元素宽度的50%。您只能通过css和react方式来实现这一点。如果你感兴趣，请告诉我编辑这个答案。

Answer 4

从display: none转换到display: block将不起作用。事实上，只有有限数量的CSS属性可以设置动画，而display不是一个(请参阅：MDN上的可设置动画的CSS属性(。

做这件事的常见方法是从width: 0转换到width: 50%(或者无论您希望块的值是什么，请记住auto都不起作用(。

.parent {
display: flex;
justify-content: space-evenly;
background-color: #f31d84;
width: fit-content;
}
.icon {
margin: 5px;
}
.text {
display: block;
margin: 5px;
width: 0;
overflow: hidden;
transition: all .2s ease;
}
.parent:hover .text {
width: 50%;
transition: all .2s ease;
}

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