为何animation name未更改？div的slideOut动画无法执行问题咨询

我来帮你拆解这两个问题的根源，再给出可行的修复方案：

问题1：为什么animationName看起来没更改？ #

你在JS里修改的是a.style.animationName——也就是<div id="box1">这个元素本身的内联样式，但你的slideIn动画是绑定在.newBox:after这个伪元素上的。伪元素不属于DOM树中的真实节点，JavaScript根本无法直接访问或修改伪元素的样式，所以你修改父元素的animationName完全不会影响到伪元素的动画设置，自然看起来“没变化”。

问题2：slideOut动画无法执行的原因 #

本质和第一个问题一样：你试图给父元素设置animationName，但slideOut动画需要作用在伪元素上才能看到视觉效果；另外，你没有设置任何触发伪元素执行slideOut的条件——原来的.newBox:after始终绑定的是slideIn动画，没有机制让它切换到slideOut。

修复方案：用类切换控制伪元素动画 #

既然JS碰不到伪元素，那我们就通过给父元素切换不同的类，让CSS自动控制伪元素的动画。下面是修正后的完整代码：

修正后的CSS #

.box, .newBox, .slideOut {
  width: 300px;
  height: 200px;
  text-align: center;
  border: 1px solid black;
  position: relative;
  overflow: hidden;
}
/* 鼠标hover时的滑入动画 */
.newBox:after {
  content: "";
  position: absolute;
  background-color: rgba(0,0,0,0.1);
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  animation: slideIn 1s forwards; /* forwards让动画结束后保持最后一帧 */
}
/* 鼠标离开时的滑出动画 */
.slideOut:after {
  content: "";
  position: absolute;
  background-color: rgba(0,0,0,0.1);
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  animation: slideOut 1s forwards;
}
@keyframes slideIn {
  0% { transform: translate(100%,0); }
  100% { transform: translate(0,0); }
}
@keyframes slideOut {
  0% { transform: translate(0%,0); }
  100% { transform: translate(100%,0); }
}

修正后的JavaScript #

var a = document.getElementById('box1');

function slide() {
  if (a.classList.contains('newBox')) {
    // 切换到滑出动画：先移除滑入类，添加滑出类
    a.classList.remove('newBox');
    a.classList.add('slideOut');
    // 滑出动画结束后，移除滑出类，回到初始状态
    a.addEventListener('animationend', function handler() {
      a.classList.remove('slideOut');
      a.removeEventListener('animationend', handler); // 移除监听避免重复触发
    });
  } else {
    // 切换到滑入动画：移除可能残留的滑出类，添加滑入类
    a.classList.remove('slideOut');
    a.classList.add('newBox');
  }
}

HTML保持不变 #

<div id="box1" class="box" onmouseover="slide()" onmouseleave="slide()"></div>

关键改进点说明 #

1. 用类切换替代直接修改style：通过给父元素添加/移除.newBox和.slideOut类，让CSS自动控制伪元素的动画，完美避开JS无法操作伪元素的限制。
2. 使用classList管理类名：比直接操作className更安全，不会意外覆盖其他类名，还能方便地检查类是否存在。
3. 添加animationend事件监听：确保滑出动画结束后清除滑出类，避免后续鼠标hover时出现样式冲突。
4. 动画添加forwards属性：让动画结束后保持最后一帧的状态，滑入后伪元素停在可视区域，滑出后停在右侧隐藏区域。

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