显示子元素时调整元素大小的过渡

Question

我正在尝试让组件在显示子元素时自动调整大小。

聚焦父 div 时显示/隐藏子元素。这个 div 会自动调整大小，但我想让它平滑。纯CSS3可以吗？

我已经尝试了几件事：宽度/可见性转换、溢出-x：隐藏、calc()...我暂时找不到可行的解决方案。我不想使用 jquery 之类的方法（$.hide() 之类的）...

这是我想要制作动画的示例：

  .chip {
    display: inline-block;
    position: relative;
    color: #747474;
    line-height: 32px;
    padding: 0 12px;
    background-color: #e4e4e4;
    border-radius: 5px;
}

.chip > i {
  display: none;
}

.chip:hover > i{
  display: inline-block;
  cursor: pointer;
}

<link href="https://use.fontawesome.com/releases/v5.0.9/css/all.css" rel="stylesheet"/>
<div class="chip">
    Animation
    <i class="fa fa-times"></i>
</div>

Answer 1

由于不能为display属性设置动画，所以可以使用max-width和transition来实现效果。 opacity 被赋予添加淡入淡出效果

.chip {
    display: inline-block;
    position: relative;
    color: #747474;
    line-height: 32px;
    padding: 0 12px;
    background-color: #e4e4e4;
    border-radius: 5px;
    vertical-align:middle;
}

.chip > i {
  display:inline-block;
  max-width:0em;
  opacity:0;
  transition:max-width .5s,opacity .5s;
  overflow:hidden;
  vertical-align:middle;
}

.chip:hover > i{
  max-width:2em;
  opacity:1;
}

<link href="https://use.fontawesome.com/releases/v5.0.9/css/all.css" rel="stylesheet"/>
<div class="chip">
    Animation
    <i class="fa fa-times"></i>
</div>

您还可以使用transform 等其他属性来实现更漂亮的动画。

.chip {
  display: inline-block;
  position: relative;
  color: #747474;
  line-height: 32px;
  padding: 0 12px;
  background-color: #e4e4e4;
  border-radius: 5px;
  vertical-align: middle;
}

.chip>i {
  display: inline-block;
  max-width: 0em;
  opacity: 0;
  transition: max-width .5s, opacity .5s,transform .5s;
  overflow: hidden;
  vertical-align: middle;
  transform:scale(0,0) rotate(-90deg); 
}

.chip:hover>i {
  max-width: 1em;
  opacity: 1;
  transform:scale(1,1) rotate(0deg); 
}

<link href="https://use.fontawesome.com/releases/v5.0.9/css/all.css" rel="stylesheet" />
<div class="chip">
  Animation
  <i class="fa fa-times"></i>
</div>