CSS动画循环失效求助：全屏切换动画仅前两次点击有效

问题根源 #

你的代码使用classList.toggle()切换动画类，但这个方法仅会切换当前类的存在状态，不会处理另一个对立的动画类。导致第三次点击时实际是移除了之前添加的animate类（而非重新添加），第四次点击移除animatereverse类，自然无法触发动画。再加上animation-fill-mode: forwards会保留动画结束后的元素状态，后续移除类不会改变元素高度，最终出现“两次有效、两次失效”的循环。

修复方案 #

将toggle替换为add，同时在添加当前动画类前移除另一个动画类，确保每次点击都能正确触发目标动画：

修改后的TS/JS代码

var fullscreen = false;
document.getElementById('fllbtn').addEventListener("click", function () {          
  const mvElement = document.getElementById("mv");
  if(fullscreen === false){     
    fullscreen = true;
    // 先移除反向动画类，再添加全屏动画类
    mvElement.classList.remove("animatereverse");
    mvElement.classList.add("animate");
  }else{
    fullscreen = false;
    // 先移除全屏动画类，再添加反向动画类
    mvElement.classList.remove("animate");
    mvElement.classList.add("animatereverse");
  }
})

补充说明

• 每次切换时先移除对立的动画类，避免两个动画类同时存在于元素上引发样式冲突
• 使用add而非toggle，确保每次点击都能明确添加目标动画类，触发动画执行
• animation-fill-mode: forwards会保留动画结束后的状态，无需额外修改元素基础样式

可选优化方案 #

如果想简化代码，可使用classList.replace()方法（现代浏览器均支持）：

var fullscreen = false;
document.getElementById('fllbtn').addEventListener("click", function () {          
  const mvElement = document.getElementById("mv");
  if(fullscreen === false){     
    fullscreen = true;
    mvElement.classList.replace("animatereverse", "animate");
  }else{
    fullscreen = false;
    mvElement.classList.replace("animate", "animatereverse");
  }
})

第一次点击时元素上没有animatereverse类，replace会直接添加animate类，效果和先移除再添加一致。

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