平滑 CSS 过渡
Smoothening CSS transition
基于这里和那里的一些示例,我制作了一个搜索元素,其中只有图标可见,当鼠标悬停在图标或其父元素上时,文本字段会向右滑动:
@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>
There's some misalignment on the icon but, for some reason, it's just here
效果不错,但太生硬了。所以我添加了一个过渡 transition: all .5s;
并且它完美地工作......在开幕式上。当文本字段被隐藏时,灰线先出现,然后是占位符文本,最后是 SVG 图标。
此外,在我添加过渡后,在页面加载时文本框会闪烁片刻。经过几次测试后,我发现罪魁祸首是 transition
规则中定义的 all
,正如预期的那样,它也影响了使文本字段透明所需的 background-color
。
我怎样才能使它更平滑,showing/hiding 同时没有这种闪烁?
如果您还在 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>
基于这里和那里的一些示例,我制作了一个搜索元素,其中只有图标可见,当鼠标悬停在图标或其父元素上时,文本字段会向右滑动:
@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>
There's some misalignment on the icon but, for some reason, it's just here
效果不错,但太生硬了。所以我添加了一个过渡 transition: all .5s;
并且它完美地工作......在开幕式上。当文本字段被隐藏时,灰线先出现,然后是占位符文本,最后是 SVG 图标。
此外,在我添加过渡后,在页面加载时文本框会闪烁片刻。经过几次测试后,我发现罪魁祸首是 transition
规则中定义的 all
,正如预期的那样,它也影响了使文本字段透明所需的 background-color
。
我怎样才能使它更平滑,showing/hiding 同时没有这种闪烁?
如果您还在 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>