Question

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

＆＃13;

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

＆＃13;

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

＆＃13;

我想要的是我的标题也会在搜索栏的同时向上移动10px。

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

Answer 1

纯CSS解决方案 - Flexbox订单

如果您能够通过更改dom来重新构建html，那么order在html中排名第一，但在屏幕上排名第二。此方法使用flexbox .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; }来执行此操作。

以下是一个例子。

＆＃13;

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

＆＃13;

order: x;

＆＃13;

<强>拨弄

https://jsfiddle.net/Hastig/djj01x6e/

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

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

与第一个完全相同，但不需要使用.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; }

＆＃13;

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

＆＃13;

textField.rac_textSignal()
            .toSignalProducer()
            .map { $0 as! String }
            .flatMapError { _ in SignalProducer<String, NoError>.empty }
            .throttle(2.0, onScheduler: QueueScheduler.mainQueueScheduler)
            .filter { $0.isEmpty }
            .startWithNext { text in
                print("t: \(text)")
        }

＆＃13;

<强>拨弄

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

你可以在没有flexbox的情况下使用position来执行类似的操作：绝对保持输入第一个在dom但第二个在屏幕上，但它也取决于你能够改变html结构。

Answer 2

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

在聚焦输入时动画父div

2 个答案: