CSS Keyframe Animation切换失效：点击按钮控制元素滑入滑出求助

咱们一步步拆解你代码里的问题，以及怎么修复这个滑入滑出的交互效果：

核心问题点 #

1. 判断逻辑错误 + 行内样式获取限制 #

你的JavaScript判断条件if (x.style.animation === "shrink .8s")有两个致命问题：

• 首先，element.style只能读取行内样式，你在CSS样式表中定义的animation: shrink .8s并不会被x.style.animation捕获到，初始状态下这个值是空字符串，第一次点击直接进入else分支。
• 其次，逻辑完全写反了：如果当前是收缩（隐藏）状态，应该切换为展开（显示）动画，但你代码里满足条件时反而又设置了一次shrink动画，等于没有变化。

2. 动画定义不完整 #

你写的expand动画只定义了100%的状态，但没有指定初始状态。当元素经过shrink动画后top值是-100vh，expand动画需要从这个位置开始过渡到top:0，否则不会产生滑动效果。

3. 动画切换的状态残留问题 #

直接修改style.animation时，浏览器可能不会重新触发动画，加上animation-fill-mode: forwards的影响，元素的状态可能无法正确切换。

修复后的完整代码 #

HTML（保持不变） #

<button id="button">Click</button>
<div id="one"></div>

CSS（用Transition简化动画+类控制状态） #

#one {
  position: absolute;
  top: -100vh; /* 初始隐藏在视口上方 */
  left: 0;
  width: 100%;
  height: 100vh;
  background-color: black;
  z-index: -1;
  transition: top 0.8s ease; /* 用transition代替animation更简洁可控 */
}

/* 用类标记显示状态 */
#one.show {
  top: 0;
}

JavaScript（简化逻辑+类切换） #

const button = document.getElementById("button");
const panel = document.getElementById("one");

button.addEventListener("click", function() {
  // 一键切换类名，自动处理显示/隐藏状态
  panel.classList.toggle("show");
});

为什么用Transition而不是Animation？ #

这里改用transition实现滑动效果，比@keyframes更直观：

• 只需要定义元素的初始状态和目标状态，浏览器自动处理过渡动画
• 配合classList.toggle()可以一键切换状态，代码更简洁，也更容易维护

如果你坚持想用Animation实现，也可以调整代码：

#one {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  background-color: black;
  z-index: -1;
  animation-fill-mode: forwards;
}

@keyframes expand {
  from { top: -100vh; }
  to { top: 0; }
}

@keyframes shrink {
  from { top: 0; }
  to { top: -100vh; }
}

const button = document.getElementById("button");
const panel = document.getElementById("one");
// 用变量记录当前状态，避免依赖不可靠的style属性
let isShrunk = true;

button.addEventListener("click", function() {
  // 先清空动画，强制浏览器重绘以重置动画状态
  panel.style.animation = 'none';
  void panel.offsetWidth;
  
  if (isShrunk) {
    panel.style.animation = 'expand .8s';
  } else {
    panel.style.animation = 'shrink .8s';
  }
  isShrunk = !isShrunk;
});

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