How to show element on button click using Vanilla JS and CSS

user_5711656 0
Viewed 645

I have two box. I want to fadeoutLeft my first box when user click on button.

But I have one more condition. I want to show box2 when box1 is 75% fadeout or In other words I want a callback function which tell box1 fadeout 75% done.

Is this possible ?

Currently I am doing like this

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Static Template</title>
    <style>
      @keyframes fadeOutLeft {
        from {
          opacity: 1;
        }
        to {
          opacity: 0;
          transform: translate3d(-10%, 0, 0);
        }
      }
      .box {
        width: 200px;
        height: 200px;
      }
      .box1 {
        background-color: #aff;
      }

      .box2 {
        background-color: #eac;
        opacity: 0;
      }

      .fadeOutLeft {
        animation-name: fadeOutLeft;
        animation-duration: 10000ms;
      }
    </style>
  </head>
  <body>
    <div class="box box1"></div>
    <div class="box box2"></div>
    <button id="abc">Start Animation</button>
    <script>
      document.getElementById("abc").addEventListener("click", function () {
        document.querySelector(".box1").classList.add("fadeOutLeft");
      });
    </script>
  </body>
</html>

here is my code https://codesandbox.io/s/cranky-resonance-5ddzt?file=/index.html:0-1077

using CSS I am not able to get when callback function when it done 75%

requestanimationframe css-animations css html javascript
3 Answers

You don't need to create a callback, with just CSS you can specify box two to appear with an animation delay of the time you need in this case 7500ms

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Static Template</title>
    <style>
      @keyframes fadeOutLeft {
        from {
          opacity: 1;
        }
        to {
          opacity: 0;
          transform: translate3d(-10%, 0, 0);
        }
      }
      .box {
        width: 200px;
        height: 200px;
      }
      .box1 {
        background-color: #aff;
      }

      .box2 {
        background-color: #eac;
        opacity: 0;
        animation: showBoxTwo 0s 7.5s forwards;
      }
      
      @keyframes showBoxTwo {
        from {
          opacity: 0;
        }
        to {
          opacity: 1;
        }
      }

      .fadeOutLeft {
        animation-name: fadeOutLeft;
        animation-duration: 10000ms;
      }
    </style>
  </head>
  <body>
    <div class="box box1"></div>
    <div class="box box2"></div>
    <button id="abc">Start Animation</button>
    <script>
      document.getElementById("abc").addEventListener("click", function () {
        document.querySelector(".box1").classList.add("fadeOutLeft");
      });
    </script>
  </body>
</html>

user_169991410

I am not much good in css but you can also implement it using js. You can try this and change as your requirements

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Static Template</title>
    <style>
      @keyframes fadeOutLeft {
        from {
          opacity: 1;
        }
        to {
          opacity: 0;
          transform: translate3d(-10%, 0, 0);
        }
      }
      .box {
        width: 200px;
        height: 200px;
      }
      .box1 {
        background-color: #aff;
      }

      .box2 {
        background-color: #eac;
        opacity: 0;
      }

      .fadeOutLeft {
        animation-name: fadeOutLeft;
        animation-duration: 10000ms;
      }
      .fadeInLeft {
        animation-name: fadeInLeft;
        animation-duration: 10000ms;
      }
      @keyframes fadeInLeft {
        from {
          opacity: 0;
        }
        to {
          opacity: 1;
          transform: translate3d(+40%, 0, 0);
        }
      }
      
    </style>
  </head>
  <body>
    <div class="box box1"></div>
    <div class="box box2"></div>
    <button id="abc">Start Animation</button>
    <script>
      document.getElementById("abc").addEventListener("click", function () {
        var ele = document.querySelector(".box1");
        ele.classList.add("fadeOutLeft");
        fade(ele);
      });
      
      function fade(element) {
          var op = 1;  
          var timer = setInterval(function () {
              if (op <= 0.3){
                  alert("current opacity is: " + op);
                  document.querySelector(".box2").classList.add("fadeInLeft");
                  // your code
                  clearInterval(timer);
                  element.style.display = 'none';
              }
              element.style.opacity = op;
              element.style.filter = 'alpha(opacity=' + op * 100 + ")";
              op -= op * 0.1;
          }, 50);
      }
    </script>
  </body>
</html>

user_48457300

You can use setTimeout() for box2 for triggering its animation after 2500ms.

 document.getElementById("abc").addEventListener("click", function () {
 document.querySelector(".box1").classList.add("fadeOutLeft");
     setTimeout(()=>{
         alert('box 1 fading 75% done');       
         document.querySelector(".box2").classList.add("fadeInRight");
      },2500)
  });
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Static Template</title>
    <style>
      @keyframes fadeOutLeft {
        from {
          opacity: 1;
        }
        to {
          opacity: 0;
          transform: translate3d(-10%, 0, 0);
        }
      }
      
      @keyframes fadeInRight {
        from {
          opacity: 0;
        } 
        to {
          opacity: 1;
          transform: translate3d(-10%, 0, 0);
        }
      }
      .box {
        width: 200px;
        height: 200px;
      }
      .box1 {
        background-color: #aff;
      }

      .box2 {
        background-color: #eac;
        opacity: 0;
      }

      .fadeOutLeft {
        animation-name: fadeOutLeft;
        animation-duration: 10000ms;
      }
      .fadeInRight {
        animation-name: fadeInRight;
        animation-duration: 10000ms;
      }
    </style>
  </head>
  <body>
    <div class="box box1"></div>
    <div class="box box2"></div>
    <button id="abc">Start Animation</button>
  </body>
</html>

user_98800900
Related