Question

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

在聚焦父div时显示/隐藏子元素。这个div自动调整大小，但我想让它顺利。纯CSS3有可能吗？

我已经尝试了几件事：宽度/可见度的转换，overflow-x：hidden，calc（）...我暂时找不到可行的解决方案。我不想使用类似jquery的方法（$ .hide（）或其他东西）...

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

＆＃13;

  .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;
}

＆＃13;

<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>

＆＃13;

Answer 1

由于您无法为display属性设置动画，因此您可以使用max-width和transition来实现此效果。 opacity被赋予了添加淡入淡出效果

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

您还可以使用其他属性（如transform）来制作更漂亮的动画。

＆＃13;

.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); 
}

＆＃13;

<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>

＆＃13;

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

1 个答案: