滑出输入栏点击

我有一个搜索输入字段设置为不透明度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

滑出输入栏点击

回答

相关问题