如摘要所述，本文将深入探讨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 首次点击无效的问题。 记住，事件监听器需要在页面加载完成后立即绑定，而不是在点击事件处理函数内部。 遵循这些最佳实践，可以提高代码的可靠性和可维护性。
以上就是CSS Transition 首次点击无效的解决方案的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1525230.html
微信扫一扫 
支付宝扫一扫 
