使<input />出现在过渡<div>

Question

我有此设置：

.wrapper {
  height: 40px;
  width: 80px;
  border-style: solid;
  border-width: 2px;
  border-radius: 40px;
  border-color: red;
  display: flex;
  align-items: center;
  justify-content: center;
}

.element {
  background-color: hotpink;
  width: 10px;
  height: 10px;
}

.wrapper:hover {
  width: 800px;
  -webkit-transition: width 0.4s ease-in-out;
  justify-content: left;
  padding-left: 35px;
}

.text-input {
  display: none;
}

.wrapper:hover .text-input {
  display: block;
}

<div>
  <div class=wrapper>
    <div class=element>
      <input class=text-input type="text" name="search" />
    </div>
  </div>
</div>

https://codepen.io/anon/pen/BOzJxL

我需要textinput出现在hotpink div elemenet旁边（它需要留在input出现时的位置）。我需要它一点一点地出现-一种被piyxel揭示的像素。离开div时，我希望它再次被隐藏-与它的样式相同。

Answer 1

这将为您工作。

.wrapper {
  height: 40px;
  width: 75px;
  border-style: solid;
  border-width: 2px;
  border-radius: 40px;
  border-color: red;
  display: flex;
  align-items: center;
  padding-left:30px;
  -webkit-transition: width 0.4s ease-in-out;
  box-sizing:border-box;
}

.element {
  background-color: hotpink;
  width: 10px;
  height: 10px;
}

.wrapper:hover {
  width: 100%;
}

.text-input {
  max-width: 0;
  float: left;
  padding: 0px;
  border: 0px transparent;
  -webkit-transition:max-width 0.6s ease-in-out;
  transition:max-width 0.6s ease-in-out;
}

.wrapper:hover .text-input {
  max-width: 50%;
  padding: 2px;
  border: 1px solid #d4d4d4;
}

<div class="wrapper">
  <div class="element"></div>
  <input class="text-input" type="text" name="search" />
</div>