如何通过JavaScript每次加载新邮箱时触发CSS动画？

问题出在CSS动画的执行机制上：默认情况下，动画只会在元素首次渲染、或者从display:none切换到display:block时触发一次。当你在#emails-view已经可见的状态下切换邮箱（仅更新innerHTML），浏览器不会重新触发动画。

下面是两种可行的解决方法：

方法一：用CSS类控制动画（推荐） #

先修改CSS，把动画样式抽成独立类：

#emails-view {
    position: relative;
    background-color: white;
    text-align: center;
    font-size: 20px;
    width: 100%;
    padding-bottom: 10px;
    border-radius: 15px;
}

@keyframes grow {
    0% { top: 0%; }
    30% { top: 50%; }
    100% { top: 0%; }
}

/* 把动画放到单独类中 */
.emails-animate {
    animation-name: grow;
    animation-duration: 1s;
    animation-fill-mode: forwards;
}

然后修改load_mailbox函数，通过移除再添加类来触发动画：

document.addEventListener('DOMContentLoaded', function() {
  document.querySelector('#inbox').addEventListener('click', () => load_mailbox('inbox'));
  document.querySelector('#sent').addEventListener('click', () => load_mailbox('sent'));
  document.querySelector('#archived').addEventListener('click', () => load_mailbox('archive'));
  load_mailbox('inbox');
}); // 注意补上缺失的闭合括号

function load_mailbox(mailbox) {
  const emailsView = document.querySelector('#emails-view');
  
  // 切换视图显示状态
  emailsView.style.display = 'block';
  document.querySelector('#mail-view').style.display = 'none';
  document.querySelector('#compose-view').style.display = 'none';
  
  // 重置动画：先移除类，强制浏览器重绘，再添加类
  emailsView.classList.remove('emails-animate');
  void emailsView.offsetWidth; // 强制触发重绘，必须加这行
  emailsView.classList.add('emails-animate');
  
  // 更新邮箱标题
  emailsView.innerHTML = `<h3>${mailbox.charAt(0).toUpperCase() + mailbox.slice(1)}</h3>`;
}

方法二：直接重置animation属性（无需修改CSS结构） #

如果不想调整CSS类，可以直接通过JS重置元素的动画属性：

document.addEventListener('DOMContentLoaded', function() {
  document.querySelector('#inbox').addEventListener('click', () => load_mailbox('inbox'));
  document.querySelector('#sent').addEventListener('click', () => load_mailbox('sent'));
  document.querySelector('#archived').addEventListener('click', () => load_mailbox('archive'));
  load_mailbox('inbox');
}); // 补上缺失的闭合括号

function load_mailbox(mailbox) {
  const emailsView = document.querySelector('#emails-view');
  
  emailsView.style.display = 'block';
  document.querySelector('#mail-view').style.display = 'none';
  document.querySelector('#compose-view').style.display = 'none';
  
  // 重置动画状态
  emailsView.style.animation = 'none';
  void emailsView.offsetWidth; // 强制重绘
  emailsView.style.animation = ''; // 恢复默认动画
  
  emailsView.innerHTML = `<h3>${mailbox.charAt(0).toUpperCase() + mailbox.slice(1)}</h3>`;
}

关键说明 #

void emailsView.offsetWidth这行代码的作用是强制浏览器立即计算元素的尺寸，触发重绘。如果没有这一步，浏览器会合并前后的样式修改，导致动画不会重新执行。

另外注意你的原JS代码中，DOMContentLoaded的监听函数最后缺少闭合括号)，这会导致代码报错，必须补上。

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