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

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

转载作者：太空宇宙更新时间：2023-11-04 07:22:52

25

4

我试图通过单击搜索图标，使用 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>

最佳答案

它没有风格，但也许这就是您要找的

$(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>

关于javascript - 如何通过过渡将搜索栏从中心扩展到两侧，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/50129264/

25

4

0

文章推荐： java - 从父级访问子属性，Maven 项目

文章推荐： css - 如何将 css 添加到数据字段属性？

c# - Delphi 扩展到 C#
如何将浮点 10 字节十六进制字符串(Delphi 中的扩展数据类型)转换为 C# 数据类型？例如:00 00 00 00 00 00 00 80 ff 3f 在 Delphi 1 最佳答案涉及同
c++ - PRId16 扩展到 d
我正在阅读 this page上面写着 If one of the strings has an encoding prefix and the other doesn't, the one that
r - 是否可以将 geom_ribbon 扩展到 xlimits？
我有以下代码(作为示例)，我想对其进行调整，以使功能区扩展到整个 xrange，如 geom_hline()做。功能区指示哪些值在可接受的范围内。在我的实际应用程序中，有时没有上限或下限，因此 hli
linq - 如何将 Linq 扩展到 SQL？
去年，斯科特·格思里 stated “如果您想要对执行的 SQL 进行绝对控制，您实际上可以覆盖 LINQ to SQL 使用的原始 SQL”，但我找不到描述可扩展性方法的文档。我想修改以下 LIN
java - 扩展到 fragment 或 Activity
我尝试在我的应用中创建一个抽屉导航。我有 3 个当前选项(查看、声明、报告)，当然这 3 个 Activity 已扩展到 fragment。在View 中，它有一个next 按钮，该按钮将转到另一个页
java - 将 Activity 扩展到 AppCompatActivity
很抱歉，如果我的问题被重复，但我无法(或不知道如何谷歌)找到答案。我想使用 rxlifecycle-navi 库来将 rxjava 绑定(bind)到生命周期，所以我需要扩展 NaviActivity
javascript - 如何将方法附加/扩展到 dom 元素
有这个html: aaa 做的时候: $('#hi1').sayHi(); 我想收到一条“嗨”提醒有人知道这是怎么做到的吗？最佳答案了解更多关于jQuery plugin authoring
ios - 如何使 UITextView 扩展到 UIImageVIew
我有一个 UIImageView 和一个 UITextView。当点击 UITextView 时，我需要 UITextView 在 UIImageView 上展开。我不知道该怎么做。从这里为此最
java - 为什么不能分配 I 扩展到 <类型>？
以下语句: URLClassLoader ucl = (URLClassLoader) ClassLoader.getSystemClassLoader(); Class uclc = ucl.get
java - 为什么不能分配 I 扩展到 <类型>？
以下语句: URLClassLoader ucl = (URLClassLoader) ClassLoader.getSystemClassLoader(); Class uclc = ucl.get
unix - 在 UNIX shell 脚本中 : What does $! 扩展到？
$的意思是什么!在 shell 或 shell 脚本中？我正在尝试理解具有以下内容的脚本。 local@usr> a=1 local@usr> echo $a 1 local@usr> echo $!
gwt - 为什么我不能添加从 SimplePanel 扩展到 RootPanel 的类？
我正在 GWT 中设计一个简单的应用程序，并且在客户端有不同的 View 。每个 View 都从 SimplePanel 扩展而来，并将根据需要添加到 RootPanel。我的第一个 View 是
azure - 从 S2 扩展到 S3 数据层似乎不可能？
我尝试在 SQL Azure 选项卡中从 S2 扩展到 S3，但 S3 似乎不可用，尽管它已被引入。另外，我还有大量可用的 DTU，即 1900 左右。是否无法扩展到 S3？我是否需要导出数据库，然后
javascript - 关于将此代码从 querySelector 扩展到 querySelectorAll 的建议
我有一个带有 JS、html 和 css 的自定义视频播放器。我的问题的关键是我没有预料到将其从一个视频扩展到两个视频，我希望重构它，以便我可以在一个页面上播放多个视频。我尝试将所有内容重写为 for
Firebase 实时数据库 - 扩展到 100.000 个并发连接以上
我当前正在开发的应用程序需要可扩展的实时通信。我们一直在研究并尝试 Firebase 实时数据库和 firestore。看来Firebase实时数据库更加成熟并且经过测试，而firestore仍处于测
kubernetes - 如何将 kubernetes daemonset 扩展到 0？
当 pod 被 daemonset 控制时，pod 会出现一些错误，状态会是 CrashLoopBackOff ，我想删除这些 Pod 但不想删除 DaemonSet。所以我想把daemonset缩
java - 将 Graphic Void 扩展到 Jframe？
我有 Jframe 表单并创建了从中绘制图形的类，为此我需要将该 void 类扩展为 jframe 表单 package grafiktest; import java.awt.Color; impo
qt - 如何让 QWidget 扩展到 QTabWidget 中的整个选项卡？
在布局和尺寸策略方面，我从来都不是太出色，所以这可能是一个简单的答案，但就是这样。当我向 QTabWIdget 添加新选项卡并将小部件设置为 QSplitter 时，拆分器将使用给定的全部空间量。但
r - 如何以规范的方式将 as.list 扩展到 S4 对象
我在将我的 S4 对象转换回列表时遇到了一些问题。例如，以下嵌套的 S4 类: setClass("nssItem", representation(value = "numeric
java - 将 JPA 扩展到 Web 服务
在阅读了 DDD 的一些页面后，我了解了存储库模式，然后在应用程序中成功使用了它(我真的很喜欢它)；然后我注意到 EntityManager 是 generic-repository-like，但是当

首页

博学

6Ren·AI

商城

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