输入焦点时为父 div 设置动画答案

【问题标题】：Animate parent div when an input is focused输入焦点时为父 div 设置动画
【发布时间】：2016-08-26 16:52:47
【问题描述】：

我正在努力做到这一点，当有人点击输入框时，它会升到屏幕顶部。我能够完成这项工作，但我不能让父 div 中的其他内容随之移动。这是我所拥有的：

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 像素。

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

【问题讨论】：

你不能像现在的 HTML 结构那样使用纯 CSS 来做到这一点。无法使用 CSS 选择父母或以前的兄弟姐妹。你必须使用 JavaScript。

标签： html css css-animations

【解决方案1】：

纯 CSS 解决方案 - Flexbox 顺序

如果您能够稍微重构您的 html，则可以通过更改 dom 使 input 在 html 中排名第一，但在屏幕上排名第二。该方法使用 flexbox order 来实现。

这是一个例子。

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

如果这对你有用，请告诉我，我会详细解释。

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

和第一个差不多但是不用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 的情况下使用 position: absolute 来做类似的事情，以在 dom 中保持输入第一个但在屏幕上保持第二个，但这也取决于您是否能够更改 html 结构。

【讨论】：

【解决方案2】：

您可以使用 jQuery 在 input:focus 上切换或添加类到 brandHeader，然后您可以将过渡添加到 h1 和 input

【讨论】：