How can I make a div slowly slide out (with CSS' transition property) when a specific button is clicked?
Question
I'm trying to make the hint-bubble div slowly slide out (with 'transition: 0.5s') whenever hint-btn is clicked. I managed to make it work so that the hint-bubble shows up when the button is clicked, but it shows up instantly, I can't figure out how to slow down the transition.
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;
}
});
You can also check it on codepen if you prefer: https://codepen.io/gchib00/pen/ExNrvrR
2 answers
solution1
2 2021-03-12 18:53:29
You can't use display to transition visibility of objects,
instead use opacity and pointer-event: none to make it not block clicks
You can also use classList.toggle to more easily toggle and not have to worry about the previous state.
It also allows you to put your visible styles in the stylesheet and not in the script which makes it easier to maintain
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>
read more:
solution2
1 ACCPTED 2021-03-12 18:52:03
transition does not work with display rule. Use the rules of opacity and visibility together.
Add visibility: hidden and opacity: 0 , as default, to the css, to the selector .hint-bubble . And delete display: none .
Also, pay attention to the javascript code.
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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
How Do I make a <div> slide into view when a button is clicked?
How can I make a DIV slide in and out?
How can I make a div fade out when it is clicked?
How do I make a div appear, then slide all the way to the right, then fade out slowly?
How can I animate this div to slide left when the 'right' button is clicked jquery?
how can i add css style for a div when i clicked on a button in another div
How can I make smooth slide transition?
how can i add css transition of image to slide up and down on hover of div
How can i make a button clicked when i just click a div
How can I make a div appear only when a specific element gets clicked in jQuery?
Related Tags