Question

基于这里和那里的一些示例，我制作了一个搜索元素，其中只有图标可见，并且在将鼠标悬停在图标或其父元素上时，文本字段会向右滑动：

 @import URL( 'https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/5.0.2/css/bootstrap.min.css' );

:root {
  --darker-gray: 22, 22, 22;      /** #191919 */
  --mid-gray: 89, 89, 89;       /** #595959 */
}

header .top {
  background-color: rgba( var( --darker-gray ) );

  -webkit-box-shadow: 0 3px 5px -2px #0D0D0D;
          box-shadow: 0 3px 5px -2px #0D0D0D;

  color: rgba( var( --light-text ) );
  padding: 2.5rem;
  position: fixed;
  top: 0;
  width: 100%;
}

.wrapper input {
  background: transparent;
  border: none;
  color: rgba( var( --mid-gray ) );
  cursor: pointer;
  display: inline-block;
  font-size: 2rem;
  height: 3.75rem;
  left: 2.5rem;
  outline: none;
  position: absolute;
  top: 0;
  transition: all .5s;
  width: 0;
  z-index: 3;
}

  .wrapper svg {
    cursor: pointer;
    margin-top: -1.5rem;
    position: relative;
    top: -1px;
  }

  .wrapper:hover input,
  .wrapper:focus input,
  .wrapper:focus-within input {
    border-bottom: 1px solid rgba( var( --mid-gray ) );
    cursor: text;
    width: 24rem;
    z-index: 1;
  }

    .wrapper:hover svg,
    .wrapper:focus svg,
    .wrapper:focus-within svg {
      left: 22rem;
    }

.icon.search {
  fill: rgba(var(--mid-gray));
  height: 2.25rem;
  width: 2.25rem;
}

<header>

  <div class="top">

    <div class="d-flex justify-content-between">
      
      <div class="wrapper">
        <input placeholder="search" type="text" />
        <svg class="icon search button">
          <path d="M9.516 14.016q1.875 0 3.188-1.313t1.313-3.188-1.313-3.188-3.188-1.313-3.188 1.313-1.313 3.188 1.313 3.188 3.188 1.313zM15.516 14.016l4.969 4.969-1.5 1.5-4.969-4.969v-0.797l-0.281-0.281q-1.781 1.547-4.219 1.547-2.719 0-4.617-1.875t-1.898-4.594 1.898-4.617 4.617-1.898 4.594 1.898 1.875 4.617q0 0.984-0.469 2.227t-1.078 1.992l0.281 0.281h0.797z"/>
        </svg>
      </div>
      
    </div>
  </div>
  
</header>

<块引用>

图标上有一些错位，但由于某种原因，它就在这里

效果很好，但太生硬了。所以我添加了一个过渡 transition: all .5s; 并且它完美地工作......在开场。当文本字段被隐藏时，首先显示灰线，然后是占位符文本，最后是 SVG 图标。

此外，在我添加了过渡之后，页面加载的文本框会闪烁片刻。经过几次测试，我发现罪魁祸首是 all tule 中定义的 transition，正如预期的那样，它也会影响使文本字段透明所需的 background-color。< /p>

我怎样才能让它更流畅，同时显示/隐藏所有内容而不出现这种闪烁？

Answer 1

如果你还在 SVG 和它的左坐标上添加一个过渡，它看起来更好吗？

此外，过渡只能在一个或多个类似的属性上设置：

transition: width .5s, z-index 0.5s; 仅在 width 和 z-index 上发生。

@import URL( 'https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/5.0.2/css/bootstrap.min.css' );

:root {
  --darker-gray: 22, 22, 22;      /** #191919 */
  --mid-gray: 89, 89, 89;       /** #595959 */
}

header .top {
  background-color: rgba( var( --darker-gray ) );

  -webkit-box-shadow: 0 3px 5px -2px #0D0D0D;
          box-shadow: 0 3px 5px -2px #0D0D0D;

  color: rgba( var( --light-text ) );
  padding: 2.5rem;
  position: fixed;
  top: 0;
  width: 100%;
}

.wrapper input {
  background: transparent;
  border: none;
  color: rgba( var( --mid-gray ) );
  cursor: pointer;
  display: inline-block;
  font-size: 2rem;
  height: 3.75rem;
  left: 2.5rem;
  outline: none;
  position: absolute;
  top: 0;
  transition: width .5s, z-index 0.5s;
  width: 0;
  z-index: 3;
}

  .wrapper svg {
    cursor: pointer;
    margin-top: -1.5rem;
    position: relative;
    top: -1px;
    left:0;
    transition:left .5s;
  }

  .wrapper:hover input,
  .wrapper:focus input,
  .wrapper:focus-within input {
    border-bottom: 1px solid rgba( var( --mid-gray ) );
    cursor: text;
    width: 24rem;
    z-index: 1;
  }

    .wrapper:hover svg,
    .wrapper:focus svg,
    .wrapper:focus-within svg {
      left: 22rem;
    }

.icon.search {
  fill: rgba(var(--mid-gray));
  height: 2.25rem;
  width: 2.25rem;
}

<header>

  <div class="top">

    <div class="d-flex justify-content-between">
      
      <div class="wrapper">
        <input placeholder="search" type="text" />
        <svg class="icon search button">
          <path d="M9.516 14.016q1.875 0 3.188-1.313t1.313-3.188-1.313-3.188-3.188-1.313-3.188 1.313-1.313 3.188 1.313 3.188 3.188 1.313zM15.516 14.016l4.969 4.969-1.5 1.5-4.969-4.969v-0.797l-0.281-0.281q-1.781 1.547-4.219 1.547-2.719 0-4.617-1.875t-1.898-4.594 1.898-4.617 4.617-1.898 4.594 1.898 1.875 4.617q0 0.984-0.469 2.227t-1.078 1.992l0.281 0.281h0.797z"/>
        </svg>
      </div>
      
    </div>
  </div>
  
</header>

平滑 CSS 过渡

1 个答案: