css - 如何在过渡后完全隐藏元素

Question

我有一个标签和一个相互内联的小输入框。在这一行下方，我有一些静态文本。

当鼠标悬停在输入框上时，输入框会向左侧增长，并“隐藏”旁边的内联文本。

我注意到，在输入框完成过渡到全宽后，下面会创建一个空行(不可见的内联文本被推到下一行)。

我试过使用 display: none 属性，但不幸的是，过渡和显示不能很好地结合在一起。

HTML:

<div class="container">
  <input />
  <label>Hide Me</label>
</div>
<div>
  <label>Static Text</label>
</div>

CSS(更少):

.container {
  display: inline-block;
  width: 200px;

  label {
    transition: all ease 1s;
    transition-delay: 1s;
  }

  input {
    float: right;
    transition: width 2s ease;
    width: 0;

    &:hover {
      width: 200px;
    }
  }

  input:hover + label {
    visible: hidden;
    opacity: 0;
    transition: all ease 0s;
    transition-delay: 0;
  }
}

这是一个演示:Codepen

有没有办法在没有 Javascript 的情况下完全隐藏内联文本(基本上就好像内联文本已应用 display:none 一样)？

我知道如何通过检查转换何时完成来使用 javascript 解决此问题。但我很想知道是否有仅 CSS 的解决方案。

Answer 1

这是你需要的吗？

fieldset{
  display:inline-block;
  position:relative;
  width:200px;
  height:auto;
  border:none;
  background:#26a69a;
}
label{
  display:inline-block;
  vertical-align:middle;
  color:white;
  position:relative;
  z-index:1;
  transition:opacity 385ms cubic-bezier(0.23, 1, 0.32, 1);
}
input{
  position:absolute;
  z-index:2;
  width:5px;
  right:5px;
  top:8px;
  transition:all 385ms cubic-bezier(0.23, 1, 0.32, 1);
}

fieldset:hover label{
  opacity:0;
}

fieldset:hover input{
  width:195px;
  right:10px;
}

<fieldset>
  <label>Hover on me</label>
  <input type="text"/>
</fieldset>

希望对你有帮助