我正在开发一个带有 css 过渡的动画按钮,但遇到了问题。 按钮应该自行调整大小,以便整个文本在元素中始终可见。 问题是我的文本并不总是相同。我将宽度和填充设置为自动,但它不起作用,我不知道如何解决这个问题。 这是我的代码。任何人都可以帮助我吗?谢谢
.a-btn{
color: #ffffc2;
background-color: #ffffc2;
border: 1px solid #dfdfdf;
padding-left:20px;
padding-right:20px;
position:relative;
float:left;
overflow:hidden;
-webkit-transition:all 0.3s linear;
-moz-transition:all 0.3s linear;
-o-transition:all 0.3s linear;
transition:all 0.3s linear;
}
.a-btn-text{
display:block;
white-space:nowrap;
color:#446388;
-webkit-transition:all 0.2s linear;
-moz-transition:all 0.2s linear;
-o-transition:all 0.2s linear;
transition:all 0.2s linear;
}
.a-btn-slide-text{
position:absolute;
height:100%;
top:0px;
right:20px;
width:0px;
background:#ffffc2;
color:#ff0000;
white-space:nowrap;
text-align:left;
text-indent:10px;
overflow:hidden;
line-height:28px;
-webkit-transition:width 0.3s linear;
-moz-transition:width 0.3s linear;
-o-transition:width 0.3s linear;
transition:width 0.3s linear;
}
.a-btn:hover{
background-color: #fdfd85;
padding-right:130px;
}
.a-btn:hover .a-btn-slide-text{
background-color: #fdfd85;
width:auto;
}
<html>
<head>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet"/>
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet"/>
</head>
<body>
<a href="#" onclick="removeSelectedExercise();" class="btn a-btn btn-sm margin-right">
<span class="a-btn-text"><i class="fa fa-trash red"></i></span>
<span class="a-btn-slide-text">Retirer articles sélectionnés</span>
</a>
</body>
</html>
解决办法是将宽度改为max-width
.a-btn{
color: #ffffc2;
background-color: #ffffc2;
border: 1px solid #dfdfdf;
padding-left:15px;
padding-right:20px;
position:relative;
float:left;
overflow:hidden;
max-width: 30px;
-webkit-transition:max-width 0.3s ease-in-out;
-moz-transition:max-width 0.3s ease-in-out;
-o-transition:max-width 0.3s ease-in-out;
transition:max-width 0.3s linear;
}
.a-btn-text{
display:block;
white-space:nowrap;
color:#ff0000;
}
.a-btn:hover{
background-color: #fdfd85;
max-width: 300px;
}
<html>
<head>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet"/>
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet"/>
</head>
<body>
<a href="#" onclick="removeUnselectedExercise();" class="btn a-btn btn-sm ">
<span class="a-btn-text"><i class="fa fa-trash red " style="padding-right:20px;"></i> Remove Selected</span>
</a>
</body>
</html>
.a-btn{
color: #ffffc2;
background-color: #ffffc2;
border: 1px solid #dfdfdf;
padding-left:20px;
padding-right:20px;
position:relative;
float:left;
overflow:hidden;
-webkit-transition:all 0.3s linear;
-moz-transition:all 0.3s linear;
-o-transition:all 0.3s linear;
transition:all 0.3s linear;
}
.a-btn-text{
display:block;
white-space:nowrap;
color:#446388;
-webkit-transition:all 0.2s linear;
-moz-transition:all 0.2s linear;
-o-transition:all 0.2s linear;
transition:all 0.2s linear;
}
.a-btn-slide-text{
position:absolute;
height:100%;
top:0px;
right:20px;
width:0px;
background:#ffffc2;
color:#ff0000;
white-space:nowrap;
text-align:left;
text-indent:10px;
overflow:hidden;
line-height:28px;
-webkit-transition:width 0.3s linear;
-moz-transition:width 0.3s linear;
-o-transition:width 0.3s linear;
transition:width 0.3s linear;
}
.a-btn:hover{
background-color: #fdfd85;
padding-right:160px;
}
.a-btn:hover .a-btn-slide-text{
background-color: #fdfd85;
width:auto;
}
<html>
<head>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet"/>
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet"/>
</head>
<body>
<a href="#" onclick="removeSelectedExercise();" class="btn a-btn btn-sm margin-right">
<span class="a-btn-text"><i class="fa fa-trash red"></i></span>
<span class="a-btn-slide-text">Retirer articles sélectionnés</span>
</a>
</body>
</html>
在 css 的 .a-btn-slide-text 部分中,更改行
right: 20px
此属性将文本放置在屏幕之外,我建议将其更改为类似的内容
.a-btn-slide-text{
position:absolute;
height:100%;
top:0px;
right:-2px;
非常古老的话题,但我有一个动画的想法
letter-spacing
:这样动画会根据文本的长度动态适应。
示例:
.btn {
display: flex;
align-items: center;
justify-content: center;
transition: .3s ease;
}
.btn span {
overflow: hidden;
transition: .3s ease;
padding: 0;
opacity: 0;
letter-spacing: -10px; /* may vary based on your font-family and font-size */
}
.btn:hover span {
padding-right: 5px;
opacity: 1;
letter-spacing: unset;
}
<button class="btn" type="button">
<span>works well with any text length</span>
<i>></i>
</button>