CSS Transition 仅在第二次点击时生效的解决方案-js教程-PHP中文网

CSS Transition 仅在第二次点击时生效的解决方案

心靈之曲

发布： 2025-10-01 11:57:01

原创

450人浏览过

css transition 仅在第二次点击时生效的解决方案

本文旨在解决 CSS transition 在首次点击时无效，需要第二次点击才能生效的问题。通过分析问题代码，我们发现事件监听器被错误地放置在点击事件处理函数内部，导致监听器在第一次点击后才被绑定。本文将提供修改后的代码示例，确保 transition 效果在第一次点击时即可正常触发，并深入探讨事件监听器的正确使用方法。

问题分析

原始代码的问题在于，transitionEffect 函数内部绑定了 click 事件监听器。这意味着，只有在第一次点击 #last 按钮后，才会开始监听后续的点击事件。因此，transition 效果只能在第二次点击时生效。

function transitionEffect() {
  const button = document.querySelector("#last");
  button.addEventListener("click", function() {
    var layers = document.querySelectorAll(".bottom-layer");
    for (const layer of layers) {
      setTimeout(switchVisible, 900);
      layer.classList.toggle("active");
    }
  });
}

登录后复制

解决方案

正确的做法是将事件监听器放在 transitionEffect 函数之外，确保在页面加载时就已绑定。同时，transitionEffect 函数本身应该只负责执行 transition 效果相关的操作。

以下是修改后的代码：

立即学习“前端免费学习笔记（深入）”；

造点AI

夸克 · 造点AI

325

查看详情

function transitionEffect() {
  var layers = document.querySelectorAll(".bottom-layer");
  for (const layer of layers) {
    setTimeout(switchVisible, 900);
    layer.classList.toggle("active");
  }
}

// 在页面加载后绑定事件监听器
document.addEventListener("DOMContentLoaded", function() {
  const button = document.querySelector("#last");
  button.addEventListener("click", transitionEffect);
});

登录后复制

代码解释：

transitionEffect 函数现在只负责切换 .bottom-layer 元素的 active 类，以及调用 switchVisible 函数。
document.addEventListener("DOMContentLoaded", function() { ... }); 确保在页面完全加载后才执行其中的代码，避免在 DOM 元素尚未加载完成时尝试绑定事件监听器。
在 DOMContentLoaded 事件处理函数内部，我们获取 #last 按钮的引用，并使用 addEventListener 方法将 transitionEffect 函数绑定到按钮的 click 事件上。

完整示例代码

<!DOCTYPE html>
<html>
<head>
  <title>CSS Transition Example</title>
  <style>
    #overlay-cont {
      display: none;
      z-index: 1;
    }

    .bottom-layer {
      position: absolute;
      width: 100%;
      height: 100%;
      top: 100%;
      left: 0;
      bottom: auto;
      right: auto;
      background: #48466d;
      transition: all 0.7s cubic-bezier(0.645, 0.045, 0.355, 1);
    }

    .bottom-layer.active {
      top: -100%;
    }

    .bottom-layer--2 {
      background: #ecf3a3;
      transition-delay: 0.12s;
    }

    .bottom-layer--3 {
      background: #95a792;
      transition-delay: 0.4s;
    }
  </style>
</head>
<body>

  <button id="last">Click</button>
  <div id="main-cont">
    <h3>First Page</h3>
  </div>
  <div id="overlay-cont">
    <div class="row">
      <div class="col-md-6 overlay-text" id="overlay-col">
        <h1>Next Page</h1>
      </div>
      <div class="col-md-6" id="overlay-col">

      </div>
    </div>
  </div>
  <div class="transition-cont">
    <div class="bottom-layer"></div>
    <div class="bottom-layer bottom-layer--2"></div>
    <div class="bottom-layer bottom-layer--3"></div>
  </div>

  <script>
    function transitionEffect() {
      var layers = document.querySelectorAll(".bottom-layer");
      for (const layer of layers) {
        setTimeout(switchVisible, 900);
        layer.classList.toggle("active");
      }
    }

    function switchVisible() {
      if (document.getElementById("main-cont")) {
        if (document.getElementById("main-cont").style.display == "none") {
          document.getElementById("main-cont").style.display = "block";
          document.getElementById("overlay-cont").style.display = "none";
        } else {
          document.getElementById("main-cont").style.display = "none";
          document.getElementById("overlay-cont").style.display = "block";
        }
      }
    }

    document.addEventListener("DOMContentLoaded", function() {
      const button = document.querySelector("#last");
      button.addEventListener("click", transitionEffect);
    });
  </script>

</body>
</html>

登录后复制

注意事项：

确保 CSS transition 属性设置正确，包括 transition-property、transition-duration、transition-timing-function 和 transition-delay。
避免在 JavaScript 中直接操作元素的 style 属性，尽量通过添加或移除 CSS 类来触发 transition 效果。
使用 DOMContentLoaded 事件确保在 DOM 元素加载完成后再绑定事件监听器。

总结

正确地绑定事件监听器是确保 JavaScript 代码按预期执行的关键。通过将事件监听器放在 transitionEffect 函数之外，并在 DOMContentLoaded 事件触发后绑定，我们可以确保 CSS transition 效果在第一次点击时即可生效。记住，理解事件循环和 DOM 加载时机对于编写高效、可靠的 JavaScript 代码至关重要。

以上就是CSS Transition 仅在第二次点击时生效的解决方案的详细内容，更多请关注php中文网其它相关文章！