I would like to add an animation to the buttons below.
When displaying the buttons: the buttons should slowly increase in size until they are fully displayed.
When hiding: they should slowly get smaller until they are out from the page.
How do i get this this with css?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.btn {
transition: 1s;
/* Continue coding here */
}
</style>
</head>
<body>
<div class="container">
<button class="btn" id="q1" onclick="show()">B1</button>
<button class="btn" id="q2" hidden>B2</button>
<button class="btn" id="q3" hidden>B2</button>
</div>
</body>
</html>
<script>
function show() {
document.getElementById("q1").remove();
document.getElementById("q2").removeAttribute("hidden");
document.getElementById("q3").removeAttribute("hidden");
}
</script>
In order to animate the size, you need to set the beginning and end sizes. I would recommend using a class .hidden instead of the hidden attribute. The class will have a zero size, while the base class .btn has the styles for a non-hidden button. Then you just need to remove the class to trigger the transition.
function show() {
document.getElementById("q1").remove();
document.getElementById("q2").classList.remove("hidden");
document.getElementById("q3").classList.remove("hidden");
}.btn {
transition: all 1s;
width: 4em;
height: 2.5em;
padding: 0.5em;
/* to hide the text when hidden */
overflow: hidden;
}
.btn.hidden {
width: 0;
height: 0;
padding: 0;
}<div class="container">
<button class="btn" id="q1" onclick="show()">B1</button>
<button class="btn hidden" id="q2">B2</button>
<button class="btn hidden" id="q3">B3</button>
</div>Use a keyframe animation that is set in a function that is added or removed when the button is clicked.
example: https://jsfiddle.net/93ah2ej5/1/
(clicking one of the B2 buttons hides them and shows the B1 button)
q1 = document.getElementById("q1")
q2 = document.getElementById("q2")
q3 = document.getElementById("q3")
function show() {
q1.classList.add('hide');
setTimeout(function() {
document.getElementById("q1").hidden = true;
document.getElementById("q2").removeAttribute("hidden");
document.getElementById("q3").removeAttribute("hidden");
q2.classList.remove('hide')
q3.classList.remove('hide')
q2.classList.add('show')
q3.classList.add('show')
}, 3000)
}
function hide() {
q2.classList.add('hide')
q3.classList.add('hide')
setTimeout(function() {
q2.hidden = 'true'
q3.hidden = 'true'
q1.hidden = false
q1.classList.add('show')
q1.classList.remove('hide')
}, 3000)
}@keyframes show {
0% {
opacity: 0;
width: 10px;
height: 10px
}
100% {
opacity: 1;
width: 32px;
height: 21.5px;
}
}
.show {
animation-name: show;
animation-duration: 3s;
}
@keyframes hide {
0% {
opacity: 1;
width: 32px;
height: 21.5px;
}
100% {
opacity: 0;
width: 10px;
height: 10px
}
}
.hide {
animation-name: hide;
animation-duration: 3s;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div class="container">
<button class="btn" id="q1" onclick="show()">B1</button>
<button class="btn" id="q2" hidden onclick='hide()'>B2</button>
<button class="btn" id="q3" hidden onclick='hide()'>B2</button>
</div>
</body>
</html>Here is a way.
const button = document.querySelector(`.button`);
const showHide = document.querySelector(`.show-hide-button`);
let isHidden = true;
showHide.addEventListener(`click`, () =>{
if(isHidden === true)
{
setTimeout(()=>{
button.style.width = `50px`;
}, 100);
setTimeout(()=>{
button.style.display = `none`;
}, 1000);
}
else
{
setTimeout(()=>{
button.style.display = `block`;
}, 100);
setTimeout(()=>{
button.style.width = `150px`;
}, 150);
}
isHidden = !isHidden;
});.button{
margin-top: 10px;
width: 150px;
display: block;
transition: 1s;
};<div>
<button class="show-hide-button">ShowHide</button>
<button class="button">Button</button>
</div>