I have this HTML code:
<div>
<div style="display: flex;gap:150px" id="opacity-first">
<div>
<h2>ORM</h2>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
</div>
<div>
<p>SERM</p>
<p>1</p>
<p>1</p>
</div>
</div>
<div style="display: none;gap:150px" id="opacity-second">
<div>
<h2>ORM</h2>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
</div>
<div>
<p>SERM</p>
<p>1</p>
<p>1</p>
</div>
</div>
<div style="display: none;gap:150px" id="opacity-third">
<div>
<h2>ORM</h2>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
</div>
<div>
<p>SERM</p>
<p>1</p>
<p>1</p>
</div>
</div>
</div>
<div>
<h2><a onclick="opacity()" id="changing-h2-first">SMM</a></h2>
<h2><a onclick="opacity()" id="changing-h2-second">1</a></h2>
<h2><a onclick="opacity()" id="changing-h2-third">1</a></h2>
</div>
JS code:
function opacity(){
document.getElementById("changing-h2-first").onclick(function(){
setTimeout(function () {
document.getElementById('opacity-first').className = 'anim-opacity-enable';
},200)
document.getElementById("changing-h2-first").className = "anim-blue";
if(document.getElementById("opacity-second").style.display === "flex")
{
document.getElementById("opacity-second").className = 'anim-opacity-disable'
}
else if(document.getElementById("opacity-third").style.display === "flex")
{
document.getElementById("opacity-third").className = 'anim-opacity-disable'
}
})
document.getElementById("changing-h2-second").onclick(function (){
setTimeout(function () {
document.getElementById('opacity-second').className = 'anim-opacity-enable';
},200)
document.getElementById("changing-h2-second").className = "anim-blue";
if(document.getElementById("opacity-first").style.display === "flex")
{
document.getElementById("opacity-first").className = 'anim-opacity-disable'
}
else if(document.getElementById("opacity-third").style.display === "flex")
{
document.getElementById("opacity-third").className = 'anim-opacity-disable'
}
})
document.getElementById("changing-h2-third").onclick(function (){
setTimeout(function () {
document.getElementById('opacity-third').className = 'anim-opacity-enable';
},200)
document.getElementById("changing-h2-third").className = "anim-blue";
if(document.getElementById("opacity-first").style.display === "flex")
{
document.getElementById("opacity-first").className = 'anim-opacity-disable'
}
else if(document.getElementById("opacity-second").style.display === "flex")
{
document.getElementById("opacity-second").className = 'anim-opacity-disable'
}
})
}
CSS animation:
@keyframes opacity-disable{
from{
opacity: 1;
}
to{
opacity: 0;
display: none;
}
}
@keyframes opacity-enable{
from{
opacity: 0;
}
to{
display: flex;
opacity: 1;
}
}
@keyframes black {
from{
color:#7A73FF;
}
to{
color:#04101C;
}
}
@keyframes blue {
from{
color:#04101C;
}
to{
color:#7A73FF;
}
}
.anim-opacity-enable{
animation-name: opacity-enable;
animation-duration: 0.2s;
animation-iteration-count: 1;
animation-timing-function: ease;
animation-fill-mode: forwards;
}
.anim-opacity-disable{
animation-name: opacity-disable;
animation-duration: 0.2s;
animation-iteration-count: 1;
animation-timing-function: ease;
animation-fill-mode: forwards;
}
.anim-black{
animation-name: black;
animation-duration: 0.2s;
animation-iteration-count: 1;
animation-timing-function: ease;
animation-fill-mode: forwards;
}
.anim-blue {
animation-name: blue;
animation-duration: 0.2s;
animation-iteration-count: 1;
animation-timing-function: ease;
animation-fill-mode: forwards;
}
Animation idea like – u click on text on right side, its changing color and block on left side appearing. I wanna know how to fix this animation and maybe make it easier. Im starter in this so I believe u help me. Thanks!
Tryed to change javascript code like check for click if(document.getElementById("id").onclick)
>Solution :
You are using onclick in HTML and then trying to attach another click event inside the opacity() function. This is redundant and can lead to errors. Choose one way to attach the click event. You can’t animate the display property directly. Instead, you can toggle the display property in JavaScript after the animation is complete. You are directly setting className, which will overwrite all existing classes. Use classList.add and classList.remove to better manage the classes. The display property cannot be changed through CSS keyframes. You have to do it through JavaScript.
Instead, you should try like this :
<div id="content-wrapper">
<div id="opacity-first"> ... </div>
<div id="opacity-second"> ... </div>
<div id="opacity-third"> ... </div>
</div>
<div id="links-wrapper">
<h2><a id="changing-h2-first">SMM</a></h2>
<h2><a id="changing-h2-second">1</a></h2>
<h2><a id="changing-h2-third">1</a></h2>
</div>
document.addEventListener("DOMContentLoaded", function() {
document.getElementById("changing-h2-first").addEventListener("click", function() {
toggleOpacity("opacity-first");
});
document.getElementById("changing-h2-second").addEventListener("click", function() {
toggleOpacity("opacity-second");
});
document.getElementById("changing-h2-third").addEventListener("click", function() {
toggleOpacity("opacity-third");
});
});
function toggleOpacity(idToShow) {
const ids = ["opacity-first", "opacity-second", "opacity-third"];
ids.forEach(function(id) {
const elem = document.getElementById(id);
if (id === idToShow) {
elem.classList.add("anim-opacity-enable");
elem.classList.remove("anim-opacity-disable");
elem.style.display = "flex";
} else {
elem.classList.add("anim-opacity-disable");
elem.classList.remove("anim-opacity-enable");
setTimeout(function() {
elem.style.display = "none";
}, 200);
}
});
}
//Update this css
.anim-opacity-enable, .anim-opacity-disable {
animation-duration: 0.2s;
animation-iteration-count: 1;
animation-timing-function: ease;
animation-fill-mode: forwards;
}
.anim-opacity-enable {
animation-name: opacity-enable;
}
.anim-opacity-disable {
animation-name: opacity-disable;
}