Animation with InnerHTML

FernandoGunawan
June 9, 2024
126 views
3 votes
3 Answers

  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>

So i want to #detail-img be animated when click the image. the animation is like opacity to 0 to opacity 1, not just instant. I have try with animation css property but i was failed, nothing change. any clue to do that?

Answers

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>

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>

  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>

112233445566778899kkll

  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>

Please signup or login to give your own answer.

Click here to cancel reply.