告诉我为什么当你再次点击元素时,会有 2 秒的停顿?那些。我按第一次 - 事件立即触发,我按第二次 - 事件在 2 秒后触发。如何消除这 2 秒的延迟?
if (document.querySelector('.tab-description')?.innerHTML) {
document.querySelector('.tab-description').onclick = function () {
document.querySelector('.woocommerce-Tabs-panel--description').classList.toggle('tab-active');
}
}
if (document.querySelector('.tab-reviews')?.innerHTML) {
document.querySelector('.tab-reviews').onclick = function () {
document.querySelector('.woocommerce-Reviews').classList.toggle('tab-active');
}
}
css
.woocommerce-Tabs-panel--description {
max-height: 0;
transition: all 2s ease 0s;
overflow: hidden;
}
.woocommerce-Reviews {
max-height: 0;
transition: all 2s ease 0s;
overflow: hidden;
}
.tab-active {
max-height: 800px;
transition: all 2s ease 0s;
}
一切都在按应有的方式处理。您的动画在不到 2 秒的时间内展开到 800 像素,当它折叠时,它从 800 开始,到达实际的块高度,然后继续。解决问题——通过element.scrollHeight计算高度,通过改变高度来改变样式