Question

我目前正在尝试复制一个网站进行练习，但由于我不知道如何创建的搜索框而停止了。

现在，我知道如何使用表单和输入法创建普通搜索框，但是这个特定的搜索框有一个轻微的动画。我会解释一下。

好的，所以只有点击放大镜才能显示搜索框。执行此操作后，搜索框将从放大镜的左侧滑出。如何隐藏搜索框并仅在单击后将其显示为可见？我如何让它“滑出”？

Answer 1

我的解决方案：使用以下JavaScript代码显示：

    var button = document.getElementById("search");
    var input = document.getElementById("search_input");
    document.body.removeChild(input);
    var permission = true;
    button.addEventListener("click", appear);
    function appear() {
        if (permission == true) {
            if(document.getElementById("search_input") == null || window.getComputedStyle(document.getElementById("search_input")).getPropertyValue("opacity") == 0) {
                input.setAttribute("class", "static");
                document.body.appendChild(input);
            } else {
                sliding();
            }
        }
    }
    function sliding() {
        permission = false;
        input.setAttribute("class", "sliding");
        document.body.removeChild(input);
        document.body.appendChild(input);
        window.setTimeout(remove, 2900);
    }
    function remove() {
        document.body.removeChild(input);
        permission = true;
    }

您只需要添加＆＃34;搜索＆＃34;作为按钮标签或img标签中的id和＆＃34; search_input＆＃34;作为输入标记中的id。对于滑出，你可以使用这个CSS动画：

@keyframes slide {
    from { left: 10%; opacity: 1;}
    to { left: 90%; opacity: 0;}
}
@-webkit-keyframes slide {
    from { left: 10%; opacity: 1;}
    to { left: 90%; opacity: 0;}
}
#search_input {
    position: absolute;
    left: 10%;
}
.sliding {
    animation-name: slide;
    animation-duration: 3s;
    -webkit-animation-name: slide;
    -webkit-animation-duration: 3s;
}

Answer 2

这是一个简单的jQuery解决方案。

$(document).ready(function() {
  $('#trigger').click(function() {
    $('#search-bar').toggleClass('search-bar-expanded');
  });
});

#search-bar {
  width: 0;
  overflow: hidden;
  display: inline-block;
  transition:width 1s;
}
.search-bar-expanded {
  width: 200px!important;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>

<div id="search">
  <button><i class="fa fa-search" id="trigger"></i></button>
  <div id="search-bar">
    <input type="text"/>           
  </div>
</div>

如何创建此搜索框动画？

2 个答案: