本文旨在解决 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 效果相关的操作。
以下是修改后的代码：
立即学习“前端免费学习笔记（深入）”；
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 事件上。
完整示例代码
CSS Transition Example First Page
注意事项：
- 确保 CSS transition 属性设置正确，包括 transition-property、transition-duration、transition-timing-function 和 transition-delay。
- 避免在 JavaScript 中直接操作元素的 style 属性，尽量通过添加或移除 CSS 类来触发 transition 效果。
- 使用 DOMContentLoaded 事件确保在 DOM 元素加载完成后再绑定事件监听器。
总结
正确地绑定事件监听器是确保 JavaScript 代码按预期执行的关键。通过将事件监听器放在 transitionEffect 函数之外，并在 DOMContentLoaded 事件触发后绑定，我们可以确保 CSS transition 效果在第一次点击时即可生效。 记住，理解事件循环和 DOM 加载时机对于编写高效、可靠的 JavaScript 代码至关重要。
