CSS Transition 首次点击无效的解决方案

如摘要所述，本文将深入探讨CSS transition首次点击无效的问题，并提供有效的解决方案。

问题分析

通常，CSS 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");
    }
  });
}

这段代码的问题在于，addEventListener 仅在函数 transitionEffect 被调用后才执行。这意味着只有在第一次点击按钮后，才会开始监听后续的点击事件。

解决方案

要解决这个问题，需要确保事件监听器在页面加载时立即绑定，而不是在点击事件处理函数内部。

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

造点AI

夸克 · 造点AI

325

查看详情

修改后的 JavaScript 代码：

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);
});


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";
    }
  }
}

解释：

1. document.addEventListener('DOMContentLoaded', function() { ... });: 这段代码确保在整个 HTML 文档完全加载和解析后，才执行其中的 JavaScript 代码。这避免了在 DOM 元素还未加载完成时就尝试绑定事件监听器的情况。
2. button.addEventListener("click", transitionEffect);: 将 transitionEffect 函数作为事件监听器绑定到按钮的点击事件上。注意这里直接传入函数名 transitionEffect，而不是 transitionEffect()，后者会立即执行该函数，而不是在点击时执行。

通过以上修改，事件监听器会在页面加载完成后立即绑定，从而确保每次点击都能正确触发 transition 效果。

其他注意事项

• CSS Transition 属性： 确保 CSS 中设置了 transition 属性，并且包含了要过渡的属性、过渡时间和过渡函数。 例如: transition: all 0.7s cubic-bezier(0.645, 0.045, 0.355, 1);
• CSS 类名切换： 确保正确地切换 CSS 类名，以触发 transition 效果。 layer.classList.toggle("active");
• 延迟问题： 注意 setTimeout 函数的使用，确保延迟时间设置合理，避免过渡效果出现异常。
• 代码组织： 建议将 JavaScript 代码放在单独的文件中，并在 HTML 文件中引用，以提高代码的可维护性。

总结

通过正确绑定事件监听器，并确保 CSS 样式设置正确，可以有效解决 CSS transition 首次点击无效的问题。 记住，事件监听器需要在页面加载完成后立即绑定，而不是在点击事件处理函数内部。 遵循这些最佳实践，可以提高代码的可靠性和可维护性。

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