输入集中时为父div设置动画 [英] Animate parent div when an input is focused

问题描述

我正在尝试做到这一点，因此当有人单击输入框时，它会升至屏幕顶部。我可以完成这项工作，但父div中的其他内容无法随之移动。这是我所拥有的：

I am trying to make it so when someone clicks on the input box it rises to the top of the screen. I am able to make this work but I can't the other content within the parent div to move with it. Here is what I have:

container{

} 
input#search-bar:focus{
  position: absolute;
  border: 1px solid #008ABF;
  transition: 0.35s ease;
  color: #008ABF;
  margin-top: -10px;
}

<div class="container">
  <div class="brandHeader">
    <h1>My Header</h1>
  </div>
  <form class="formHolder">
    <input type="text" id="search-bar" placeholder="Search">
  </form>
</div>

我想要什么是我的标题，也可以与搜索栏同时上移10像素。

What I want is My Header to also move up 10px at the same time as the search bar.

如果您需要其他任何我忘记提供的信息，请询问并将其发布。

If you need any additional information that I forget to provide please ask and I will post it.

推荐答案

纯CSS解决方案-Flexbox订单

如果您能够稍微重构HTML，则有可能通过更改dom，使 input 在html中为第一，但在屏幕上为第二。这种方法使用flexbox order 来实现。

If you are able to restructure your html a little it's possible by changing the dom so input is 1st in the html but 2nd on screen. This method uses flexbox order to do so.

这里是一个示例。

.container {
  display: flex;
  flex-direction: column;
}
input {
  display: flex;
  flex-direction: column;
  order: 2;
}
.brandHeader {
  display: flex;
  order: 1;
  transition: all 0.2s ease;
}
input:focus + .brandHeader {
  margin-top: -10px;
}

<form class="container">
  <input type="text" id="search-bar" placeholder="Search">
  <div class="brandHeader">
    <h1>My Header</h1>
  </div>
</form>

小提琴

https：// jsfiddle。 net / Hastig / djj01x6e /

如果这对您有用，请告诉我，我会做进一步解释。

If that would work for you let me know and I'll explain more about it.

第二种纯CSS解决方案-flex-direction：column-reverse

与第一个几乎相同，但无需使用 order：x;

Pretty much the same as the first but no need to use order: x;

.container {
  display: flex;
  flex-direction: column-reverse;
} 
input {
  display: flex;
  flex-direction: column;
 }
.brandHeader {
  display: flex;
  transition: all 0.2s ease;
}
input:focus + .brandHeader {
 margin-top: -10px;
}

<form class="container">
    <input type="text" id="search-bar" placeholder="Search">
    <div class="brandHeader">
      <h1>My Header</h1>
    </div>
</form>

小提琴

https：// jsfiddle.net/Hastig/djj01x6e/1/

您可以在没有flexbox的情况下使用位置进行类似的操作：绝对可以使dom输入第一，但在屏幕上输入第二，但这也取决于您能否更改html结构。

You can do a similar thing without flexbox using position: absolute to keep input 1st in dom but 2nd on screen but it too depends on your being able to change html structure.

这篇关于输入集中时为父div设置动画的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！