如何解决隐藏输入的按钮
我想创建一个带有隐藏输入的按钮,该按钮在按下按钮后便会激活。 我进行了演示,但在此演示中,通过更改宽度和填充使输入动画化,效果不好。
那么有什么更好的方法来使该按钮动起来?
HTML:
<div class="button-wrap">
<label>Max score</label>
<input>
</div>
CSS:
.button-wrap {
display: flex;
height: var(--height);
outline: none;
--height: 20px;
--padding: 5px;
--background: #454555;
--background-active: #46467c;
--background-hover: #46467c;
--separator: #565666;
--radius: 5px;
--input-width: 30px;
--text-color: #eee;
}
input,label {
height: auto;
transition: .3s;
outline: 0;
color: var(--text-color);
text-align: center;
}
label {
display: inline;
width: 100%;
padding: var(--padding);
border-radius: var(--radius);
background-color: var(--background);
border-color: var(--separator);
transition: border-radius .5s;
user-select: none;
text-align: center;
}
input {
padding: var(--padding) 0;
border: none;
width: 0;
background-color: var(--background);
border-radius: 0 var(--radius) var(--radius) 0;
}
.button-wrap:hover label,.button-wrap:hover input {
background-color: var(--background-hover);
}
.button-wrap[active] label {
border-radius: var(--radius) 0 0 var(--radius);
background-color: var(--background-active);
border-color: var(--separator);
border-right: 2px solid var(--separator);
transition: border-radius .3s;
}
.button-wrap[active] input {
width: calc(var(--input-width) - 2 * var(--padding));
background-color: var(--background-active);
padding: var(--padding);
}
有一个演示:
解决方法
function myFunction(e) {
e.toggleAttribute("active").toggle;
}
.button-wrap {
display: flex;
outline: none;
--height: 20px;
--padding: 5px;
--background: #47478d;
--background-active: #46464f;
--background-hover: #46467c;
--separator: #565666;
--radius: 5px;
--input-width: 40px;
--text-color: #eee;
width: 250px;
height: 40px;
background:#34344d;
padding:15px;
}
input,label {
height: auto;
outline: 0;
color: var(--text-color);
text-align: center;
}
label {
display: flex;
width: 100%;
padding: var(--padding);
border-radius: var(--radius);
background-color: var(--background);
border-color: var(--separator);
transition: border-radius .5s;
user-select: none;
text-align: center;
align-items:center;
justify-content:center;
}
input {
padding: var(--padding);
border: none;
width: calc(var(--input-width) - 2 * var(--padding));
background-color: var(--background);
border-radius: 0 var(--radius) var(--radius) 0;
overflow: hidden;
display: none;
opacity: 0;
transition: display 0ms 400ms,opacity 400ms 0ms;
}
.button-wrap:hover label,.button-wrap:hover input {
background-color: var(--background-hover);
}
.button-wrap[active] label {
border-radius: var(--radius) 0 0 var(--radius);
background-color: var(--background-active);
border-color: var(--separator);
border-right: 2px solid var(--separator);
transition: border-radius .3s;
}
.button-wrap[active] input {
background-color: var(--background-active);
padding: var(--padding);
color:#fff;
opacity: 1;
display:block;
transition: display 0ms 0ms,opacity 600ms 0ms;
}
<div class="button-wrap" onclick="myFunction(this)">
<label>Max score</label>
<input type="text" value="100">
</div>
,
所以我的老师想出了一个答案。
HTML
<div class='button-wrap'>
<label>Max count</label>
<input>
</div>
CSS
.button-wrap {
width: 200px;
contain: content;
overflow: hidden;
border-radius: 5px;
position: relative;
outline: none;
height: 30px;
line-height: 20px;
background: #454555;
--input-width: 32px;
}
.button-wrap[active] {
background-color: #46467c;
}
.button-wrap:hover {
background-color: #46467c;
}
input,label {
height: 100%;
display: block;
box-sizing: border-box;
transition: transform .3s;
appearance: none;
outline: 0;
color: #eee;
border: none;
text-align: center;
background: transparent;
padding: 5px;
}
label {
width: 100%;
user-select: none;
}
input {
position: absolute;
top: 0;
right: 0;
border-left: 2px solid #565666;
width: var(--input-width);
transform: translateX(var(--input-width));
}
.button-wrap[active] label {
transform: translateX(calc(-1 * var(--input-width) / 2));
}
.button-wrap[active] input {
transform: translateX(0);
}
这里是demo
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。