入力がフォーカスされているときに親divをアニメ化する

Question

誰かが入力ボックスをクリックしてスクリーンの上に上がるようにしようとしています。私はこの仕事をすることができますが、親部門の他のコンテンツを一緒に動かすことはできません。ここで私が持っているものです。

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>

私が欲しいものも、検索バーと同時に10pxのを上に移動するために私のヘッダーです。

私が提供することを忘れた追加情報が必要な場合は、私がそれを投稿します。

Answer 1

の両方に純粋なCSSのソリューションをトランジションを追加することができ、jQueryを使ってinput:focusにbrandHeaderに切り替えるか、addClassすることができます - フレキシボックス注文

を使用すると、再構築することができれば、あなたのhtmlは少しdomのように変更することが可能ですので、inputはhtmlでは1位ですが、画面上では2位です。この方法ではフレックスボックス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ソリューション - フレックス方向：カラムは、逆にほとんど

最初けど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/

---

あなたは位置を使用してフレキシボックスせずに同様のことを行うことができます。画面上のDOMが、第二に、入力第一を維持するために、絶対に、それはあまりにもあなたがHTMLの構造を変更することができることに依存します。

Answer 2

あなたは、あなたがh1とinput