当我单击按钮时，我希望箭头可以平滑滑出。我目前正在通过添加“ show”类（如果应该显示箭头）来做到这一点。我试过显示：无； ->显示：内联块我尝试过width：0->宽度：100％。此代码使箭头在单击时出现/消失，但没有平滑过渡。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
span {
-webkit-transition: all .5s;
-moz-transition: all .5s;
transition: all .5s;
width: 0;
overflow: hidden;
max-width: 0;
display:none;
}
.show {
width: 100%;
display: inline;
}
</style>
<script>
function toggleArrow(elemId) {
let elem = document.getElementById(elemId);
if (elem.classList.contains('show')) {
elem.classList.remove('show');
} else {
elem.classList.add('show');
}
}
</script>
</head>
<body>
<div> Here's the button:
<button onClick="toggleArrow('title-arrow')">my button<span id="title-arrow" > ↑</span></button>
</div>
</body>
</html>
它运作正常吗？
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
button{
position:relative;
padding-right:20px;
overflow: hidden
}
span {
-webkit-transition: all .5s;
-moz-transition: all .5s;
transition: all .5s;
overflow: hidden;
top:50px;
position: absolute;
right:5px;
}
.show {
top:0;
}
</style>
<script>
function toggleArrow(elemId) {
let elem = document.getElementById(elemId);
if (elem.classList.contains('show')) {
elem.classList.remove('show');
} else {
elem.classList.add('show');
}
}
</script>
</head>
<body>
<div> Here's the button:
<button onClick="toggleArrow('title-arrow')">my button<span id="title-arrow" > ↑</span></button>
</div>
</body>
</html>如果要显示它，可以使用
button.addEventListener("click", function() {
element.style.opacity = 1;
});#element {
opacity: 0;
transition: 1s;
}然后单击按钮时，箭头元素在一秒钟内消失。