如何使用 Vanilla JS 和 CSS 在按钮单击时显示元素答案

【问题标题】：How to show element on button click using Vanilla JS and CSS如何使用 Vanilla JS 和 CSS 在按钮单击时显示元素
【发布时间】：2021-11-21 00:01:17
【问题描述】：

我有两个盒子。当用户点击按钮时，我想fadeoutLeft我的第一个框。

但我还有一个条件。我想在 box1 淡出 75% 时显示 box2，或者换句话说，我想要一个回调函数来告诉 box1 淡出 75% 完成。

这可能吗？

目前我正在这样做

<!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>

这是我的代码 https://codesandbox.io/s/cranky-resonance-5ddzt?file=/index.html:0-1077

使用 CSS 完成 75% 时我无法获得回调函数

【问题讨论】：

如果你不需要最高精确度，你可以设置一个7500毫秒的定时器，在定时器的回调中做你需要的。
@Teemu 谢谢，但我需要 first box to complete fadeout in 10s 。在7500ms 我想要box2 之后它开始fadeIn ..或者两个进程并行工作。 for2500`
你不需要 JS。在第二个盒子的动画上加一个动画延迟。

标签： javascript html css css-animations requestanimationframe

【解决方案1】：

您不需要创建回调，只需使用 CSS，您就可以指定框 2 以动画延迟出现，在这种情况下为 7500 毫秒

<!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>

【讨论】：

您好，好主意，但您能否检查一下您的 sn-p，因为它不起作用。
这很奇怪，它对我有用。
青色框 (box1) 不会向左移动或褪色。我在 Windows10/Edge 上。

【解决方案2】：

您可以使用setTimeout() for box2 在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>

【讨论】：

【解决方案3】：

我不太擅长css，但你也可以使用js 来实现它。您可以试试这个并根据您的要求进行更改

<!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>

【讨论】：