使用容器显隐控制两个element表格切换时表格抖动

在网页设计中，当使用CSS的`display`属性来通过“显”、“隐”切换两个表格时，可能会遇到元素切换时产生的视觉抖动。这是因为浏览器需要重新计算每个元素的布局位置，尤其是在从`none`到`block`或相反的变化过程中。

为了减少这种抖动，你可以采用以下策略：

1. **延迟展示**：可以给显示或隐藏表格的动画添加一定的延迟时间，让浏览器有足够的时间完成当前的渲染再开始新的改变。

.table {
  transition: display 0.3s ease;
}

.show {
  display: block !important;
  /* 添加延迟 */
  animation-delay: 0.2s;
}

.hide {
  display: none !important;
  /* 或者添加负延迟 */
  animation-delay: -0.2s;
}

2. **使用JavaScript**：利用JavaScript的`requestAnimationFrame`或者类似库（如Lodash的`throttle`函数），对切换操作进行限制频率，降低抖动效果。

function toggleTable() {
  // ...

  if (!toggleTimer) {
    toggleTimer = requestAnimationFrame(() => {
      toggleTable();
      toggleTimer = null;
    });
  }
}

// 触发切换的地方
document.getElementById('table-switcher').addEventListener('click', toggleTable);

3. **优化动画**：使用CSS `transform: translateZ(0)` 可以避免重排（reflow），并结合will-change属性告诉浏览器哪些属性会变化，减少抖动。

.table {
  will-change: transform;
  transition: opacity 0.3s ease, transform 0s; /* 尽量同时更改可见性和位移 */
}

/* ... 然后像之前一样切换 display 属性 */