HTML / CSS: How to make smooth transition? - html

Question

I am currently using some Javascript to hide and show a certain div on button click.
I want the transition to be smooth, and not so jumpy. Ideally i would like to add a little bounce effect.
Any ideas on how to achieve this?
var button = document.querySelector(".button1");
button.addEventListener("click", function() {
var content = document.querySelector(".second");
content.style.display = (content.style.display === "none") ? "block" : "none";
});
.container {
display: flex;
align-items: center;
justify-content: space-around;
width: 100%; background: red;
}
.second {
display: none;
}
<div class="container">
<div class="first">
<p> Hello world</p>
</div>
<div class="second">
<p> Goodbye World</p>
</div>
</div>
<button class="button1" >Apply</button>

Answer 1

One of a million equally beautiful options! )))
var first = document.querySelector(".first");
var second = document.querySelector(".second");
var rectSecond = second.getBoundingClientRect();
first.style.width = `${rectSecond.width}px`;
btn.addEventListener("click", () => {
first.classList.toggle("animateFirst");
second.classList.toggle("animateSecond");
});
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.container {
width: 100%;
height: 3rem;
background: red;
position: relative;
}
.container div {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.first {
background: red;
text-align: center;
}
.animateFirst {
animation: move1 0.8s ease-out forwards;
}
#keyframes move1 {
from {
left: 50%;
}
50% {
left: 10%;
}
75% {
left: 16%;
}
to {
left: 12%;
}
}
.animateSecond {
animation: move2 0.8s ease-out forwards;
}
#keyframes move2 {
from {
left: 50%;
}
50% {
left: 82%;
}
75% {
left: 76%;
}
to {
left: 80%;
}
}
</style>
<div class="container">
<div class="second">
<p>Goodbye World</p>
</div>
<div class="first">
<p>Hello world</p>
</div>
</div>
<button class="button1" id="btn">Apply</button>

Answer 2

To make CSS transition to make the transition smooth and add a bounce effect. You need to some changes to your code then you can make it very easily. Here you go -
.second {
display: none;
transition: all 0.3s ease-in-out;
}
#keyframes bounce {
0%, 20%, 50%, 80%, 100% {
transform: translateY(0);
}
40% {
transform: translateY(-30px);
}
60% {
transform: translateY(-15px);
}
}
.second.bouncing {
animation: bounce 0.5s;
}
Please add a class bouncing to the .second div in your JavaScript code.
var button = document.querySelector(".button1");
button.addEventListener("click", function() {
var content = document.querySelector(".second");
content.style.display = (content.style.display === "none") ? "block" : "none";
content.classList.toggle("bouncing");
});
I hope this will make the transition smooth, and the div will have a bouncing effect when it's displayed. Thank you

Answer 3

You cannot add animation from hidden state.
You need to first add element in layout.
var button = document.querySelector(".button1");
var content = document.querySelector(".second");
button.addEventListener("click", function () {
content.hidden = !content.hidden
});
.container {
display: flex;
align-items: center;
justify-content: space-around;
width: 100%;
background: red;
}
.second {
transform-origin: center bottom;
animation: bounce 1000ms ease-out forwards;
}
#keyframes bounce {
from,
20%,
53%,
to {
animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
transform: translate3d(0, 0, 0);
}
40%,
43% {
animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
transform: translate3d(0, -30px, 0) scaleY(1.1);
}
70% {
animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
transform: translate3d(0, -15px, 0) scaleY(1.05);
}
80% {
transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
transform: translate3d(0, 0, 0) scaleY(0.95);
}
90% {
transform: translate3d(0, -4px, 0) scaleY(1.02);
}
}
<div class="container">
<div class="first">
<p> Hello world</p>
</div>
<div class="second" hidden>
<p> Goodbye World</p>
</div>
</div>
<button class="button1">Apply</button>