本文旨在解决 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 #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; }First Page
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); });
注意事项：
确保 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 仅在第二次点击时生效的解决方案的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1525152.html
微信扫一扫 
支付宝扫一扫 
