クリック時に入力フィールドをスライドさせる

Question

検索アイコンをクリックするたびに表示される検索入力フィールドが不透明度0に設定されています。

ちょうど出現するのではなく、右からスライドさせたいと思います。 Xアイコンをクリックするか、要素の外側（文書の任意の場所）をクリックするたびにスライドバックします。

これを達成する最も良い方法は何ですか？ jQueryやCSSアニメーションを通して？

DEMOhttps://jsfiddle.net/p1zLh65g/4/

HTML

<nav class="navbar navbar-default"> 
    <div class="container"> 
    <!-- Brand and toggle get grouped for better mobile display --> 
    <div class="navbar-header"> 
     <button type="button" class="navbar-toggle" data-toggle="modal" data-target="#modal_sidebar" aria-expanded="false"> 
     <span class="sr-only">Toggle navigation</span> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 
     </button> 
     <a class="navbar-brand" href="#"> 
     <img src="img/logo.png" alt=""> 
     </a> 
    </div> 

    <!-- Collect the nav links, forms, and other content for toggling --> 
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> 
     <ul class="nav navbar-nav"> 
     <li class="dropdown nav-categories"><a href="#" class="dropdown-toggle" data-toggle="dropdown"><i class="fa fa-bars"></i>أقسام </a> 
      <ul class="dropdown-menu"> 
      <li><a href="#">رأي وتحليل</a></li> 
      <li><a href="#">جدل</a></li> 
      <li><a href="#">سلطة خامسة</a></li> 
      <li><a href="#">تحقيق</a></li> 
      <li><a href="#">ثقافة</a></li> 
      <li><a href="#">بصريات</a></li> 
      </ul> 
     </li> 
     </ul> 
     <ul class="nav navbar-nav navbar-left"> 
     <li class="nav-date"><a href="#">22 مارس 2017</a></li> 
     <li><a href="#">EN </a></li> 
     <li><a href="#">تسجيل الدخول</a></li> 
     </ul> 
     <ul class="nav navbar-nav navbar-right"> 
     <li><a href="#" class="slide"><i class="fa fa-search search-icon"></i></a></li> 
     </ul> 
     <form class="navbar-form" role="search"> 
     <div class="input-group"> 
      <input type="text" class="form-control pull-right search" placeholder="عن ماذا تبحث؟"> 
      <span class="input-group-btn"></span> 
     </div> 
     </form> 
    </div><!-- /.navbar-collapse --> 
    </div><!-- /.container-fluid --> 
</nav> 

CSS

.search { 
    opacity: 0; 
} 

input.form-control.pull-right.search.expanded { 
    border-radius: 0; 
    width: 300px; 
} 

.search.expanded { 
    opacity: 1; 
} 

.nav-categories { 
    margin-left: 15px; 
} 

Javascriptを

$('.search-icon').click(function() { 
    $('.search').toggleClass('expanded'); 
    $('.search-icon').toggleClass('fa-times'); 
}); 

Answer 1

単純なcss3遷移と、 jqueryおよびブートストラップコードを使用した簡単な例を次に示します。

私はちょうどanimationが望んでいたように動作することができたtransition propertyを追加しました。ここで

.search { 
    opacity: 0; 
    -webkit-transition: all .5s ease; 
    -moz-transition: all .5s ease; 
    transition: all .5s ease; 
    width:0px; 
} 

作業スニペットjsFiddleです。