2016-10-18 7 views
0

フレックス:は、水平方向の表示と入力を崩壊:私は(モバイル)ページの最上部に表示された2つの検索ボックスを持っている

start state

フォーカス上に所望の動作(すなわちボックスのいずれかの内部をクリック)であります:

  • 選択ボックスが
  • を展開し、他のボックスには、閉じるアイコンが右側に拡大する水平
  • 崩壊します。ここで

それは遷移後のように見えるものです:

end state

これはコードです:

<div class="navigation--mobile__search"> 
    <div class="header-searchfield" id="kurssuche"> 
     <input type="text" class="header-searchfield__input" placeholder="Search1"> 
      <a href=""> 
       <span class="icon icon--lupe"> 
        <svg class="icon__svg"> 
         <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/assets/svg/svg-symbol.svg#lupe"></use> 
        </svg> 
       </span> 
      </a> 
    </div> 
    <div class="header-searchfield" id="volltextsuche"> 
     <input type="text" class="header-searchfield__input" placeholder="Search2"> 
      <a href=""> 
       <span class="icon icon--lupe"> 
        <svg class="icon__svg"> 
         <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/assets/svg/svg-symbol.svg#lupe"></use> 
        </svg> 
       </span> 
      </a> 
    </div>      
    <span class="icon icon--close-x header-searchfield__close-button" style="display: none;"> 
     <svg class="icon__svg"> 
      <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/assets/svg/svg-symbol.svg#close-x"></use> 
     </svg> 
    </span> 
</div> 

対応LESS-クラス:

.navigation--mobile__search { 
     background: @common-quarks-color--cd-anthracite; 
     display: flex; 
     padding: .625rem .75rem; 
     position: relative; 
     .header-searchfield { 
      display: flex; 
      flex: 1; 
      &__input { 
       flex-grow: 1; 
       padding: .5625rem 2rem .5625rem .8125rem; 
      } 
      &__close-button { 
       flex: 0 0 1.8rem; 
       color: white; 
       display: none; 
       margin: .7rem 0 .7rem .5rem; 
       svg { 
        fill: @searchfield--border-color; 
        height: .8125rem; 
        width: .8125rem; 
       } 
      } 
     } 
    } 

そして、javascript:

$(function() { 
    $("#kurssuche") 
    .focusin(function() { 
     $("#volltextsuche").hide(500); 
     $(".header-searchfield__close-button").show(500); 
     $(".navigation--mobile__search-results").animate({height: "400px"}, 500); 
    }) 
    .focusout(function() { 
     $("#volltextsuche").show(500); 
     $(".header-searchfield__close-button").hide(500); 
     $(".navigation--mobile__search-results").animate({height: "0"}, 500); 
    }); 
    $("#volltextsuche") 
    .focusin(function() { 
     $("#kurssuche").hide(500); 
     $(".header-searchfield__close-button").show(500); 
     $(".navigation--mobile__search-results").animate({height: "400px"}, 500); 
    }) 
    .focusout(function() { 
     $("#kurssuche").show(500); 
     $(".header-searchfield__close-button").hide(500); 
     $(".navigation--mobile__search-results").animate({height: "0"}, 500); 
    }); 
    $(".header-searchfield__close-button").on('click', function() { 
    $(".header-searchfield__input").val(""); 
    }); 
}); 

水平崩壊の所望の動作のために

問題は、私は通常ちょうど入力してdiv要素をつかむだろう、それはこれが動作しない選択し、0に幅をアニメーション化されていない、なぜならラッパーdivはdisplay: flexです - 私はflex: -Attributeを実験しようとしましたが、うまくいかなかったようです。 flex-divを幅0にアニメートするトリックはありますか?

フィドル:あなたが実際にあなたがしようとしているものを達成するだけでCSSを使用することができますhttps://jsfiddle.net/amear6x0/

+2

あなたはあまりにもスニペット/フィドルを投稿してくださいだろうか? – kukkuz

+0

フレックスチャイルドを折り畳むには、 'min-width:0'を追加してください。それでOKです...おそらく 'overflow:hidden'を追加してください。 –

+0

@kukkuz私はひどいことをしました:https://jsfiddle.net/amear6x0/ –

答えて

6

。そのトリックは次のとおりです。

  1. 個々のコンポーネントの表示/非表示状態を示すためにクラスを使用します。 jQueryを使用してこれらのクラスを切り替えることはできます。 機能を失うことがあります;
  2. 状態によって入力要素と閉じるボタンの幅が0100%の間で切り替わります。幅の遷移は、ブラウザでスムーズにアニメーション表示できます。私は500ms(あなたのjQueryコードに示されているように)の期間を使用し、ease-in-outタイミング機能を使用してwidthプロパティをトゥイーンすることを選択しました。もちろん、必要なベジエ曲線を定義することもできます。
  3. 使用focus、代わりにそのブタfocusinfocusoutblur機能は、ちょうど私の個人的な好み

いくつかの余分なヒントです:

  • 使用box-sizing: 0追加取ってからの入力要素の余分なパディングを防ぐためにスペース
  • エレメントの親の幅が0に折りたたまれているときに、オーバーフローするコンテンツを隠すには、overflow: hiddenを使用してください。
  • 拡張性のために、同じ目的を果たす要素に対して同じ機能を繰り返さないようにしてください。 .closest().siblings()の組み合わせを使用して要素のコンテキスト依存フィルタを実行するだけで、1つの関数にある各入力要素の非表示/表示切り替えを折りたたむことができます。

ここでの概念実証例(updated fiddle hereを参照)です。

$(function() { 
 
    $('.header-searchfield input') 
 
    .on('focus', function() { 
 
    
 
     // Context-dependent filtering to reduce code redundancy :) 
 
     // Search for siblings of parent wrapper, and hide them 
 
     $(this).closest('.header-searchfield').siblings('.header-searchfield').addClass('hide'); 
 
    
 
     // Show the close button 
 
     $('.header-searchfield__close-button').addClass('show') 
 
    }) 
 
    .on('blur', function() { 
 
    
 
     // Context-dependent filtering to reduce code redundancy :) 
 
     // Search for siblings of parent wrapper, and show them 
 
     $(this).closest('.header-searchfield').siblings('.header-searchfield').removeClass('hide'); 
 
    
 
     // Hide the close button 
 
     $('.header-searchfield__close-button').removeClass('show'); 
 
    }); 
 

 
    $('.header-searchfield__close-button').on('click', function() { 
 
    $('.header-searchfield__input').val(''); 
 
    }); 
 
});
* { 
 
    box-sizing: border-box; 
 
} 
 
.navigation--mobile__search { 
 
    background: #28373c; 
 
    display: flex; 
 
    padding: .625rem .75rem; 
 
    position: relative; 
 
} 
 
.navigation--mobile__search .header-searchfield { 
 
    flex: 1 1 auto; 
 
    width: 100%; 
 
    overflow: hidden; 
 
    transition: .5s width ease-in-out; 
 
} 
 
    .navigation--mobile__search .header-searchfield.hide { 
 
    width: 0; 
 
    } 
 
.navigation--mobile__search .header-searchfield__input { 
 
    padding: .5625rem 2rem .5625rem .8125rem; 
 
} 
 
.navigation--mobile__search .header-searchfield__close-button { 
 
    flex: 0 0 auto; 
 
    color: white; 
 
    margin: .7rem 0 .7rem .5rem; 
 
    width: 0; 
 
    overflow: hidden; 
 
    transition: .5s width ease-in-out; 
 
} 
 
    .navigation--mobile__search .header-searchfield__close-button.show { 
 
    width: 1.8rem; 
 
    } 
 
.navigation--mobile__search .header-searchfield__close-button svg { 
 
    fill: #fff; 
 
    height: .8125rem; 
 
    width: .8125rem; 
 
} 
 

 
.header-searchfield { 
 
    position: relative; 
 
    margin: 0 .3125rem; 
 
} 
 
.header-searchfield__input { 
 
    background: none; 
 
    border: 1px solid #fff; 
 
    border-radius: 1rem; 
 
    padding: .5rem 2rem .5rem .8125rem; 
 
    color: #fff; 
 
    font-size: .8125rem; 
 
    width: 100%; 
 
} 
 
.header-searchfield__input:focus { 
 
    outline: 0 none; 
 
    box-shadow: none; 
 
} 
 
.icon { 
 
    width: 0.875rem; 
 
    height: 0.875rem; 
 
    fill: currentColor; 
 
    display: inline-block; 
 
} 
 
.icon__svg { 
 
    height: 100%; 
 
    vertical-align: top; 
 
    width: 100%; 
 
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="navigation--mobile__search"> 
 
    <div class="header-searchfield" id="kurssuche"> 
 
    <input type="text" class="header-searchfield__input" placeholder="Search1"> 
 
    </div> 
 
    <div class="header-searchfield" id="volltextsuche"> 
 
    <input type="text" class="header-searchfield__input" placeholder="Search2"> 
 
    </div> 
 
    <span class="icon header-searchfield__close-button"> 
 
    <svg class="icon__svg"> 
 
     <path xmlns="http://www.w3.org/2000/svg" d="M7.4 6l4.3-4.3a1 1 0 0 0 0-1.4 1 1 0 0 0-1.4 0L6 4.7 1.7.3A1 1 0 0 0 .3.3a1 1 0 0 0 0 1.4L4.6 6 .3 10.3a1 1 0 0 0 0 1.4 1 1 0 0 0 1.4 0L6 7.3l4.3 4.4a1 1 0 0 0 1.4-1.4z"/> 
 
    </svg> 
 
    </span> 
 
</div>

+0

よくやった、それです –

関連する問題