时间戳

首页 > 解决方案 > 如何通过过渡将搜索栏从中心扩展到两侧

javascript - 如何通过过渡将搜索栏从中心扩展到两侧

问题描述

我正在尝试通过单击搜索图标，使用 css 将隐藏的搜索栏从 div 的中心扩展到 div 的两侧。但它总是向左或向右扩展到一侧。我需要同时过渡到双方。我需要没有 javascript 或 jquery 的纯 css 解决方案。我尝试了动画、过渡、定位一切，但没有找到任何解决方案。我该如何解决这个问题。

 $(document).ready(function(){
    $('.search-label').on("click",function(e){
      $(".form-groups").addClass("move");
      $("#for-grp").addClass("search-open");
      $("#for-grp").removeClass("box-visible");
       $(".close-label").removeClass("d-block");
    });
});
.main
{
  position:relative;
  width: 50%;
  background-color:  aliceblue;
}
.form-groups{
  width: 0%;
  transition: width 1s;
}
.pull-right
{
  float: right;
}
.search-label
{
  position: absolute;
  top: 0;
}
.sibling
{
  clear:  right;
}
#for-grp
{
  width:  90%;
  display: block;
  margin-left:25px;
  height: 20px;
}
.box-visible
{
  visibility:hidden;
}
.move
{
  width:100%;
}
.search-open
{
  border: none !important;
  border-bottom: 1px solid grey !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}
.close-label
{
  position:absolute;
  right:0px;
}
.d-block
{
  display:none;
}
 

    <!DOCTYPE html>
        <html>
        <head>
          <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
          <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
        </head>
        <body>
        <div class="main">
            <div class="form-groups pull-right" style="display:inline" id="search">
                <span class="search-label bg-white">
                    <i class="fa fa-search icon_search"></i>
                </span>
                <input type="text" placeholder="Search" id="for-grp" class="box-visible">
            </div>
            <span class="close-label d-block"><i class="fa fa-close"></i></span>
        </div>
        </body>
        </html>

标签： javascripthtmlcss

解决方案

它没有风格，但也许这就是你想要的

$(document).ready(function(){
    $('i.fa-search').on("click",function(e){
      $('.holder').addClass('open');
    });
});
.main
{
  position:relative;
  width: 100%;
  margin: auto;
  background-color:  aliceblue;
}

input {
  width: 0%;
  display: none;
}

i.fa {
  position: absolute;
  top: 0;
}

i.fa-search {
  left: 0;
}

i.fa-close {
  right: 0;
  display: none;
}

.holder {
  position: relative;
  margin: auto;
  width: 0%;
  transition: width 1s;
}

.holder.open {
  width: 50%;
}

.holder.open input {
  width: 100%;
  display: block;
}

.holder.open i.fa-close {
  display: block;
}
<!DOCTYPE html>
        <html>
        <head>
          <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
          <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
        </head>
        <body>
        <div class="main">
            <div class="holder">
               <input placeholder="Search" type="text">
               <i class="fa fa-search"></i>
               <i class="fa fa-close"></i>
            </div>
            </div>
        </body>
        </html>

推荐阅读