每当点击提示btn时，我都试图让提示气泡div慢慢滑出(带有"transition:0.5s"(。我设法让它工作起来，这样当点击按钮时，提示气泡就会出现，但它会立即出现，我不知道如何放慢转换速度。
HTML:
<body>
<div class="hints">
<p>Need help?</p>
<br>
<p>Click button below to get some hints!<p>
<button class="hint-btn">Hints</button>
</div>
<div class="hint-bubble">I would like this div to slide out when "Hints" button is clicked</div>
</div>
</body>
CSS：
.hints {
right: 28rem;
bottom: 33.4rem;
border: 1px solid black;
background-color: #707070;
color: white;
box-shadow: 0px 0px 1px 1px black;
border-radius: 3px;
}
.hints p:first-child {
padding-bottom: 0.4rem;
border-bottom: 3px solid #a6a4a4;
margin-bottom: -1rem;
}
.hints p:nth-child(3) {
font-size: 0.7rem;
}
.hint-btn {
font-family: 'Montserrat', sans-serif;
background: none;
width: 3rem;
font-size: 0.75rem;
border-radius: 4px;
border: 1px solid #595656;
background-color: #F47B13;
color: white;
box-shadow: 0px 0px 1px #F47B13;
outline: none;
padding-top: 0.2rem;
padding-bottom: 0.2rem;
}
.hint-btn:hover {
background: #c76410;
transition: 0.4s;
}
.hint-btn:active {
background: #f2b683;
transition: 0.6s ease-in-out;
}
.hint-bubble {
width: 15.6rem;
padding: 0.2rem;
text-align: center;
color: white;
background-color: #707070;
font-size: 0.8rem;
border-radius: 3px;
box-shadow: 0px 0px 1px 1px black;
padding: 0.7rem;
transition: 0.8s;
right: 28rem;
bottom: 32.5rem;
display: none;
}
.hint-bubble:before {
position: absolute;
content: "";
width: 0px;
height: 0px;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-top: 10px solid transparent;
border-bottom: 0.8rem solid #707070;
right: 7.2rem;
top: -1.3rem;
}
Javascript：
const btnHint = document.querySelector(".hint-btn");
const hintBubble = document.querySelector(".hint-bubble");
const hintsBox = document.querySelector(".hints");
let isOn = null;
btnHint.addEventListener("click", () => {
if (isOn) {
hintBubble.style.display = "none";
isOn = false;
} else {
hintBubble.style.display = "unset";
isOn = true;
}
});
如果您愿意，也可以在代码笔上进行检查：https://codepen.io/gchib00/pen/ExNrvrR
您不能使用display来转换对象的可见性，
而是使用opacity和pointer-event: none使其不阻止点击
您也可以使用classList.toggle来更容易地切换，而不必担心以前的状态
它还允许您将可见样式放在样式表中，而不是放在脚本中，这样更容易维护
const btnHint = document.querySelector(".hint-btn");
const hintBubble = document.querySelector(".hint-bubble");
const hintsBox = document.querySelector(".hints");
btnHint.addEventListener("click", () => {
hintBubble.classList.toggle("shown")
});.hints {
right: 28rem;
bottom: 33.4rem;
border: 1px solid black;
background-color: #707070;
color: white;
box-shadow: 0px 0px 1px 1px black;
border-radius: 3px;
}
.hints p:first-child {
padding-bottom: 0.4rem;
border-bottom: 3px solid #a6a4a4;
margin-bottom: -1rem;
}
.hints p:nth-child(3) {
font-size: 0.7rem;
}
.hint-btn {
font-family: 'Montserrat', sans-serif;
background: none;
width: 3rem;
font-size: 0.75rem;
border-radius: 4px;
border: 1px solid #595656;
background-color: #F47B13;
color: white;
box-shadow: 0px 0px 1px #F47B13;
outline: none;
padding-top: 0.2rem;
padding-bottom: 0.2rem;
}
.hint-btn:hover {
background: #c76410;
transition: 0.4s;
}
.hint-btn:active {
background: #f2b683;
transition: 0.6s ease-in-out;
}
.hint-bubble {
width: 15.6rem;
text-align: center;
color: white;
background-color: #707070;
font-size: 0.8rem;
border-radius: 3px;
box-shadow: 0px 0px 1px 1px black;
padding: 0.7rem;
transition: 0.8s;
right: 28rem;
bottom: 32.5rem;
transform: translateX(-20px);
opacity: 0;
pointer-events: none;
}
.hint-bubble.shown {
transform: translateX(0);
opacity: 1;
pointer-events: all;
}
.hint-bubble::before {
position: absolute;
content: "";
width: 0px;
height: 0px;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-top: 10px solid transparent;
border-bottom: 0.8rem solid #707070;
right: 7.2rem;
top: -1.3rem;
}<div class="hints">
<p>Need help?</p>
<br />
<p>Click button below to get some hints!</p>
<button class="hint-btn">Hints</button>
</div>
<div class="hint-bubble">I would like this div to slide out when "Hints" button is clicked</div>阅读更多：
- 显示-di-in-a-smooth-manner
- MDN转换
transition不适用于display规则。同时使用opacity和visibility的规则。
默认情况下，将visibility: hidden和opacity: 0添加到css，添加到选择器.hint-bubble。并删除display: none。
此外，还要注意javascript代码。
const btnHint = document.querySelector(".hint-btn");
const hintBubble = document.querySelector(".hint-bubble");
const hintsBox = document.querySelector(".hints");
let isOn = null;
btnHint.addEventListener("click", () => {
if (isOn) {
hintBubble.style.visibility = "hidden";
hintBubble.style.opacity = "0";
isOn = false;
} else {
hintBubble.style.visibility = "visible";
hintBubble.style.opacity = "1";
isOn = true;
}
});.hints {
right: 28rem;
bottom: 33.4rem;
border: 1px solid black;
background-color: #707070;
color: white;
box-shadow: 0px 0px 1px 1px black;
border-radius: 3px;
}
.hints p:first-child {
padding-bottom: 0.4rem;
border-bottom: 3px solid #a6a4a4;
margin-bottom: -1rem;
}
.hints p:nth-child(3) {
font-size: 0.7rem;
}
.hint-btn {
font-family: "Montserrat", sans-serif;
background: none;
width: 3rem;
font-size: 0.75rem;
border-radius: 4px;
border: 1px solid #595656;
background-color: #f47b13;
color: white;
box-shadow: 0px 0px 1px #f47b13;
outline: none;
padding-top: 0.2rem;
padding-bottom: 0.2rem;
}
.hint-btn:hover {
background: #c76410;
transition: 0.4s;
}
.hint-btn:active {
background: #f2b683;
transition: 0.6s ease-in-out;
}
.hint-bubble {
width: 15.6rem;
padding: 0.2rem;
text-align: center;
color: white;
background-color: #707070;
font-size: 0.8rem;
border-radius: 3px;
box-shadow: 0px 0px 1px 1px black;
padding: 0.7rem;
transition: 0.8s;
right: 28rem;
bottom: 32.5rem;
visibility: hidden;
opacity: 0;
}
.hint-bubble:before {
position: absolute;
content: "";
width: 0px;
height: 0px;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-top: 10px solid transparent;
border-bottom: 0.8rem solid #707070;
right: 7.2rem;
top: -1.3rem;
}<div class="hints">
<p>Need help?</p>
<br />
<p>Click button below to get some hints!</p>
<p>
<button class="hint-btn">Hints</button>
</p>
</div>
<div class="hint-bubble">I would like this div to slide out when "Hints" button is clicked
</div>