基于这里和那里的一些示例,我制作了一个搜索元素,其中只有图标可见,并且在将鼠标悬停在图标或其父元素上时,文本字段会向右滑动:
@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>
我怎样才能让它更流畅,同时显示/隐藏所有内容而不出现这种闪烁?
答案 0 :(得分: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>