如摘要所述，本文将深入探讨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 被调用后才执行。这意味着只有在第一次点击按钮后，才会开始监听后续的点击事件。
解决方案
要解决这个问题，需要确保事件监听器在页面加载时立即绑定，而不是在点击事件处理函数内部。
立即学习“前端免费学习笔记（深入）”；
修改后的 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";
}
}
}解释：
- document.addEventListener('DOMContentLoaded', function() { ... });: 这段代码确保在整个 HTML 文档完全加载和解析后，才执行其中的 JavaScript 代码。这避免了在 DOM 元素还未加载完成时就尝试绑定事件监听器的情况。
- 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 首次点击无效的问题。 记住，事件监听器需要在页面加载完成后立即绑定，而不是在点击事件处理函数内部。 遵循这些最佳实践，可以提高代码的可靠性和可维护性。
