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

有没有一种方法可以完全隐藏内联文本（基本上就像内联文本没有显示一样）：

我对如何通过检查转换完成时间有一个解决办法。但是我很想知道是否有仅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>

希望这会有所帮助

Answer 2

您可以将其设置为width:0，然后使用white-space:nowrap。

我使用max-width能够依靠过渡

.container {
  display: inline-block;
  width: 200px;
  font-size:0;
}
.container label {
  font-size:initial;
  transition: all ease 1s;
  transition-delay: 1s;
  display:inline-block;
  white-space:nowrap;
  max-width:200px;
}
.container input {
  float: right;
  font-size:initial;
  transition: max-width 2s ease;
  max-width: 0;
  width:100%;
}
.container input:hover {
  max-width: 100%;
}
.container input:hover + label {
  max-width:0;
  opacity: 0;
  transition: all ease 1s;
}

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

Answer 3

您可以添加固定高度，然后使用overflow: hidden。它不一定是最好的方法，但可以起作用：https://codepen.io/anon/pen/GGaazq?editors=1100

过渡后如何完全隐藏元素

3 个答案: