Question

我一直在查看每个教程和样本，但无法做到这一点。我需要在搜索框上重新创建一个动画，以便在悬停或单击时它会扩展为占据菜单的整个宽度。与firebase website上的标题完全相同。

$( ".search" ).click(function() {
  $( ".search" ).css('width': '100%');
});

Answer 1

你可以用纯CSS做到这一点，不需要JS。查看css transitions

#search{
  width:200px;
}

#search:focus, #search:hover{
  width:100%;
  transition: width 2s;
}

<input id="search"/>

Answer 2

您可以使用pure-CSS执行此操作。

只需在:focus和:hover的搜索框中设置所需的宽度即可。对于动画，我已将transition: all 1s ease-in-out与!important一起应用，因为.ui.input input上已存在过渡属性。

.prompt {
  transition: all 1s ease-in-out !important;
    width: 180px;
}

.prompt:focus, 
.prompt:hover {
  width:  calc(100vw - 45px);
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.13/semantic.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.13/semantic.js"></script>
<div class="ui top attached menu">
  <div class="ui dropdown icon item">
    <i class="wrench icon"></i>
    <div class="menu">
      <div class="item">
        <i class="dropdown icon"></i>
        <span class="text">New</span>
        <div class="menu">
          <div class="item">Document</div>
          <div class="item">Image</div>
        </div>
      </div>
      <div class="item">
        Open...
      </div>
      <div class="item">
        Save...
      </div>
      <div class="item">Edit Permissions</div>
      <div class="divider"></div>
      <div class="header">
        Export
      </div>
      <div class="item">
        Share...
      </div>
    </div>
  </div>
  <div class="right menu">
    <div class="ui right aligned category search item">
      <div class="ui transparent icon input">
        <input class="prompt" type="text" placeholder="Search animals...">
        <i class="search link icon"></i>
      </div>
      <div class="results"></div>
    </div>
  </div>
</div>
<div class="ui bottom attached segment">
  <p></p>
</div>

使用建议扩展搜索框

2 个答案: