如何使用 display:block/none 在子元素上设置父元素的宽度动画

Question

我在一个父元素中有两个孩子，其中第一个孩子始终可见，但第二个孩子仅在 hover 上可见。 因为当我 hover 父元素展开时，我为父元素的宽度设置了适合内容。 我需要的是这个扩展的平稳过渡。 我在 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

这是一个错误的实现。 在此示例中，您的父元素宽度不会在 hover 上发生变化。如果您想为事物设置动画，一个好的做法是将宽度 0 设置为子元素，当父元素悬停时，带有 class text的 div 获得父元素宽度的 50%。 您只能通过 css 和反应方式来实现。 如果你有兴趣让我知道编辑这个答案。

Answer 4

从display: none过渡到display: block将不起作用。 实际上，只有有限数量的 CSS 属性可以进行动画处理，而display不是一个（参见： MDN 上的 Animatable 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>