如何在添加/移除div的class时触发CSS动画并实现平滑过渡

嗨，我来帮你搞定这个平滑移动的问题～你之前尝试用CSS动画没生效，主要是因为动画的触发逻辑和你想要的“类切换时双向平滑”不匹配，而且样式优先级也有冲突。下面给你两种解决方案，优先推荐更简单的transition方案：

方案一：使用CSS Transition（推荐） #

transition是专门用来处理CSS属性变化的过渡效果，当你添加或移除playing类时，它会自动触发属性的正反方向过渡，完全符合你的需求，代码还更简洁：

.description-container {
  position: absolute;
  margin-top: -11%;
  /* 指定要过渡的属性、时长和缓动函数 */
  transition: margin-top 1s ease-in;
}

.description-container.playing {
  margin-top: 0%;
}

这样设置后：

• 给元素添加playing类时，margin-top会从-11%平滑过渡到0%
• 移除playing类时，又会从0%平滑过渡回-11%
  完全不需要额外的动画关键帧，浏览器会自动处理过渡过程。

方案二：使用CSS Animation（适合复杂动画场景） #

如果你确实需要用animation来实现（比如有更复杂的动画路径），需要为两种状态分别定义动画，并且注意避免初始加载时的意外触发：

.description-container {
  position: absolute;
  margin-top: -11%;
}

/* 添加playing类时的向下滑动动画 */
.description-container.playing {
  animation: slideDown 1s ease-in forwards;
}

/* 移除playing类时的向上滑动动画 */
.description-container:not(.playing) {
  animation: slideUp 1s ease-out forwards;
}

@keyframes slideDown {
  from { margin-top: -11%; }
  to { margin-top: 0%; }
}

@keyframes slideUp {
  from { margin-top: 0%; }
  to { margin-top: -11%; }
}

⚠️ 注意：直接用:not(.playing)可能会在页面首次加载时触发slideUp动画，如果你想避免这个问题，可以通过JS来控制动画类的添加：比如在移除playing类前，先给元素添加slide-up动画类，动画结束后再移除playing类和动画类。不过显然transition方案更省心。

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