滑出輸入欄點擊

我有一個搜索輸入字段設置爲不透明度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'); 
});

來源

2017-04-25 Halnex

這可能對你有幫助：https：//codepen.io/nikhil/pen/qcyGF –

嘗試使用Animate.css。簡單易用的CSS轉換，你可以使用jQuery添加/切換類。（https://daneden.github.io/animate.css/） – melvindidit

你可以用css來實現這一點只適用於寬度的轉換 –

下面是一個簡單的例子，使用簡單的css3轉換以及您的 jquery和引導代碼。

我剛添加的transition property這使得animation爲想要的工作。

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

這裏的工作片段jsFiddle。

來源

2017-04-25 07:05:17

滑出輸入欄點擊

回答

相關問題