实现onClick触发的内容显示/隐藏平滑动画效果

嘿，我来帮你搞定这个动画卡顿的问题！其实要实现td的淡入淡出和按钮的滑入滑出联动，用jQuery或者原生JS+CSS都能做到流畅效果，下面给你两种具体的实现方案：

方案一：用jQuery快速实现（简单省心） #

jQuery的动画API已经帮我们处理了很多细节，比如table元素的display切换、动画帧的优化，所以写起来很简洁：

第一步：HTML结构 #

<table border="1">
  <tr>
    <!-- 初始隐藏的TD -->
    <td class="target-td" style="display:none;">这是要显示/隐藏的表格内容</td>
  </tr>
</table>
<!-- 初始隐藏的按钮，点击后触发动画 -->
<button class="toggle-btn" style="display:none;">切换显示状态</button>

第二步：JS代码 #

$(document).ready(function() {
  const $td = $('.target-td');
  const $btn = $('.toggle-btn');
  let isContentVisible = false;

  $btn.on('click', function() {
    if (!isContentVisible) {
      // 第一次点击：TD淡入 + 按钮滑下，动画时长统一为300ms保证同步
      $td.fadeIn(300);
      $btn.slideDown(300);
    } else {
      // 再次点击：TD淡出 + 按钮滑上
      $td.fadeOut(300);
      $btn.slideUp(300);
    }
    isContentVisible = !isContentVisible;
  });

  // 页面加载后先让按钮滑出来，供用户点击触发
  $btn.slideDown(300);
});

这种方案的优势是不用操心底层的动画优化，jQuery会自动用requestAnimationFrame来保证动画流畅，不会出现生硬卡顿的情况。

方案二：原生JS+CSS实现（无依赖更轻量） #

如果你的项目不想引入jQuery，用原生JS配合CSS过渡也能实现同样的流畅效果，重点是利用CSS的transition属性来处理动画：

第一步：HTML结构 #

<table border="1">
  <tr>
    <td class="target-td">这是要显示/隐藏的表格内容</td>
  </tr>
</table>
<button class="toggle-btn">切换显示状态</button>

第二步：CSS样式（核心是过渡动画） #

/* 初始隐藏TD，设置opacity过渡 */
.target-td {
  opacity: 0;
  display: none;
  transition: opacity 0.3s ease-in-out;
}

/* TD显示时的状态 */
.target-td.show {
  opacity: 1;
  display: table-cell; /* 注意TD是table-cell类型，不能用block */
}

/* 按钮的滑入滑出用max-height模拟（因为height:auto无法过渡） */
.toggle-btn {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease-in-out;
}

/* 按钮滑下的状态 */
.toggle-btn.slide-down {
  max-height: 60px; /* 设置一个比按钮实际高度大的值即可 */
}

第三步：JS代码（控制类名切换） #

const tdElement = document.querySelector('.target-td');
const btnElement = document.querySelector('.toggle-btn');
let isVisible = false;

// 页面加载后先让按钮滑出来
window.addEventListener('load', () => {
  btnElement.classList.add('slide-down');
});

btnElement.addEventListener('click', () => {
  if (!isVisible) {
    // 显示TD：先设置display，再触发重绘，最后加opacity类
    tdElement.style.display = 'table-cell';
    void tdElement.offsetWidth; // 强制触发重绘，保证过渡生效
    tdElement.classList.add('show');
  } else {
    // 隐藏TD：先移除opacity类，等待过渡完成后再设置display:none
    tdElement.classList.remove('show');
    setTimeout(() => {
      tdElement.style.display = 'none';
    }, 300); // 时长和CSS过渡保持一致
  }
  isVisible = !isVisible;
});

几个让动画更流畅的小技巧 #

• 动画时长尽量统一（比如都用300ms），保证联动的协调性；
• 避免在动画过程中频繁修改DOM样式，尽量用类名切换来触发CSS过渡；
• 对于table元素，不要直接对display:none做过渡，要先切换display属性再处理opacity变化。

内容的提问来源于stack exchange，提问作者Jay-oh