为什么我设置的CSS transition过渡动画没有正常生效？

问题根因 #

你当前的代码没有触发过渡效果，是因为.member-card元素在初始渲染时就已经携带了fade类，浏览器首次绘制页面时会直接合并两类的样式计算出最终渲染结果，不存在两个状态的切换过程，transition规则无法捕获到样式变更，因此不会产生过渡动画。

解决方法 #

你可以选择以下两种方案实现预期效果：

• 方案1：页面加载完成后动态添加fade类，主动触发状态切换
  新增如下JS代码即可：

  document.addEventListener('DOMContentLoaded', () => {
    // 先触发一次浏览器回流，确认初始样式已经被应用
    void document.body.offsetWidth;
    // 批量给所有卡片添加fade类
    document.querySelectorAll('.member-card').forEach(card => {
      card.classList.add('fade');
    });
  })
  

  同时需要修改HTML代码，移除初始挂载在.member-card上的fade类：

  <div id="members">
      <div class="member-card"></div>
      <div class="member-card"></div>
      <div class="member-card"></div>
      <div class="member-card"></div>
      <div class="member-card"></div>
      <div class="member-card"></div>
      <div class="member-card"></div>
  </div>
  

• 方案2：使用CSS @keyframes 动画实现，无需额外JS代码
  修改.member-card的CSS规则即可：

  .member-card {
    background: grey;
    width: 150px;
    height: 150px;
    margin: 5px;
    opacity: 0;
    transform: translateY(50px);
    display: inline-block;
    /* 替换transition为animation规则 */
    animation: fadeIn 2.5s ease forwards;
  }
  
  /* 定义动画关键帧 */
  @keyframes fadeIn {
    to {
      opacity: 1;
      transform: translateY(0px);
      background: orange;
    }
  }
  

  这种方案不需要修改原有HTML结构，也不需要写JS代码即可实现加载动画效果。

内容的提问来源于stack exchange，提问作者ryanvb92