Menu
document.getElementById("first-img").addEventListener("click", function(){
document.getElementById("detail-img").innerHTML = `Detail of first img`
})
document.getElementById("second-img").addEventListener("click", function(){
document.getElementById("detail-img").innerHTML = `Detail of second img`
}) .container{
display: flex;
height: 30px;
gap: 1rem;
}
.img{
background-color: red;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div class="container">
<div class="img" id="first-img">This is image-1</div>
<div class="img" id="second-img">This is image-2</div>
</div>
<p id="detail-img">Click image for detail</p>
</body>
</html>I want to #detail-img be animated when I click the image. The animation is like opacity from 0 to opacity 1, not just instant. I have tried animation css property but I failed, nothing changed. Any clue to do that?
274
asked Dec 31 '25 06:12
A problem with animations/transitions in CSS can be that once the change has been made the system doesn't do it again.
This snippet gets round that by changing the opacity and transition then requesting an animation frame (so the new styles are taken up) then sets the opacity and transition to the final values.
Note: the snippet has introduced a function to cut down on repetitive code. More could be done e.g. by using querySelectorAll.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.container {
display: flex;
height: 30px;
gap: 1rem;
}
.img {
background-color: red;
}
</style>
</head>
<body>
<div class="container">
<div class="img" id="first-img">This is image-1</div>
<div class="img" id="second-img">This is image-2</div>
</div>
<p id="detail-img">Click image for detail</p>
<script>
const detailEl = document.getElementById("detail-img");
function setup(imgEl, detail) {
imgEl.addEventListener("click", function() {
detailEl.style.opacity = 0;
detailEl.style.transition = 'opacity 0s';
detailEl.innerHTML = detail;
requestAnimationFrame(function() {
detailEl.style.transition = 'opacity 4s';
detailEl.style.opacity = '1';
});
})
}
setup(document.getElementById("first-img"), `Detail of first img`);
setup(document.getElementById("second-img"), `Detail of second img`);
</script>
</body>
</html>You can surround your detail-img with a detail-container, then apply a class to it as described in this answer, removing that class with a timeout.
document.getElementById("first-img").addEventListener("click", function(){
let detailContainer = document.getElementById('detail-container');
detailContainer.classList.add('pre-animation');
document.getElementById("detail-img").innerHTML = `Detail of first img`;
setTimeout(function () {
detailContainer.classList.remove('pre-animation');
}, 1000);
})
document.getElementById("second-img").addEventListener("click", function(){
let detailContainer = document.getElementById('detail-container');
detailContainer.classList.add('pre-animation');
document.getElementById("detail-img").innerHTML = `Detail of second img`;
setTimeout(function () {
detailContainer.classList.remove('pre-animation');
}, 1000);
}) .container{
display: flex;
height: 30px;
gap: 1rem;
}
.img{
background-color: red;
}
#detail-container {
transition: all 1s;
opacity: 1;
}
#detail-container.pre-animation {
opacity: 0;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div class="container">
<div class="img" id="first-img">This is image-1</div>
<div class="img" id="second-img">This is image-2</div>
</div>
<div id="detail-container">
<p id="detail-img">Click image for detail</p>
</div>
</body>
</html>If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
