点击事件实现图片淡入动画问题：JS无法添加/移除类的排查

我帮你排查了代码里的几个关键问题，这就是你的动画无法正常工作的原因：

核心问题分析 #

• 混淆原生JS与jQuery方法：你用了addClass()、removeClass()和.one()这些jQuery专属的API，但你的代码是原生JavaScript环境，这些方法不存在，所以会直接报错。
• CSS属性错误：.Polaroid img里的opacity: 0px是无效写法，opacity是0到1的数值，不需要单位，应该写成opacity: 0;。
• 动画类名拼写混淆：你CSS里的类名是PoloaroidAnim（少了一个字母l，正确应该是PolaroidAnim），虽然不影响功能，但统一拼写能避免后续维护时的混淆。
• 动画触发逻辑问题：直接添加类后没有处理重复触发的情况，而且需要确保图片更新后再启动动画，否则可能出现动画和图片加载不同步的问题。

修正后的完整代码 #

HTML（保持原结构无需修改） #

<div class="container"> 
  <h1>Meet some of the Characters</h1> 
  <div class="boxContainer"> 
    <div class="Polaroid"> 
      <img src="images/imgage1.jpg" id="LargeImage"> 
      <div class="PolaroidText" id="LargeImageText">Image 1</div> 
    </div> 
  </div> 
  <div class="row"> 
    <div class="column"><img src="images/imgage1.jpg" alt="Image 1" onclick="ClickImage(this)"></div> 
    <div class="column"><img src="images/imgage2.jpg" alt="Image 2" onclick="ClickImage(this)"></div> 
    <div class="column"><img src="images/imgage3.jpg" alt="Image 3" onclick="ClickImage(this)"></div> 
    <div class="column"><img src="images/imgage4.jpg" alt="Image 4" onclick="ClickImage(this)"></div> 
    <div class="column"><img src="images/imgage5.jpg" alt="Image 5" onclick="ClickImage(this)"></div> 
    <div class="column"><img src="images/imgage6.jpg" alt="Image 6" onclick="ClickImage(this)"></div> 
    <div class="column"><img src="images/imgage7.jpg" alt="Image 7" onclick="ClickImage(this)"></div> 
  </div> 
</div>

CSS（修正opacity错误，统一类名拼写） #

.boxContainer { 
  max-width: 600px; 
  height: auto; 
  margin: auto; 
  padding: 20px; 
} 
.Polaroid { 
  width: 100%; 
  height: auto;
  max-width: 2058px; 
  transform: rotate(2deg); 
  margin-top: 50px; 
  margin-bottom: 50px; 
  box-shadow: rgba(0, 0, 0, 0.6) 10px 10px 10px; 
  background-color: white; 
  border: 2px solid black; 
  border-radius: 5px; 
  padding: 20px; 
} 
.Polaroid img { 
  opacity: 0; /* 修正：去掉无效的px单位 */
  max-width: 100%; 
  height: auto; 
  border: 2px solid #949baa; 
  transition: opacity 2s ease !important; 
} 
.PolaroidText { 
  color: black; 
  font-size: 28px; 
  text-align: center; 
  margin: auto; 
  padding: 10px; 
  text-decoration: underline; 
} 
.column { 
  float: left; 
  width: 14%; 
  padding: 5px; 
  display: table; 
  margin: auto; 
} 
.column img { 
  width: 100%; 
  height: auto; 
  opacity: 0.8; 
  cursor: pointer; 
  border-radius: 5px; 
  z-index: 1; 
  transform: rotate(2deg); 
  transition-duration: .3s; 
} 
.column img:hover { 
  opacity: 1; 
  transform: scale(1.2); 
  box-shadow: rgba(0, 0, 0, 0.6) 5px 5px 5px; 
  z-index: 9999; 
} 
/* 修正类名拼写为PolaroidAnim，和组件名统一 */
.PolaroidAnim { 
  animation-name: FadeImage; 
  -webkit-animation-name: FadeImage; /* 修正：补上缺失的冒号 */
  animation-duration: 1s; 
  -webkit-animation-duration: 1s; 
  animation-timing-function: linear; 
  -webkit-animation-timing-function: linear; 
  animation-fill-mode: forwards; 
  -webkit-animation-fill-mode: forwards; 
} 
@keyframes FadeImage { 
  0% {opacity: 0;} 
  100% {opacity: 1;} 
}

JavaScript（改用原生JS方法，优化动画触发逻辑） #

function ClickImage(smallimg) {
  const lgImage = document.getElementById("LargeImage");
  const lgImageText = document.getElementById("LargeImageText");

  // 先移除动画类，确保下次点击能重新触发动画
  lgImage.classList.remove("PolaroidAnim");
  
  // 更新图片和文本内容
  lgImage.src = smallimg.src;
  lgImageText.textContent = smallimg.alt;

  // 强制浏览器重绘，否则移除类后立即添加可能不生效
  void lgImage.offsetWidth;

  // 添加动画类启动淡入效果
  lgImage.classList.add("PolaroidAnim");

  // 监听动画结束事件，完成后移除类（避免类一直绑定在元素上）
  function handleAnimationEnd() {
    lgImage.classList.remove("PolaroidAnim");
    // 移除监听，避免内存泄漏
    lgImage.removeEventListener("animationend", handleAnimationEnd);
    lgImage.removeEventListener("webkitAnimationEnd", handleAnimationEnd);
  }
  // 兼容标准和webkit内核浏览器
  lgImage.addEventListener("animationend", handleAnimationEnd);
  lgImage.addEventListener("webkitAnimationEnd", handleAnimationEnd);
}

关键优化点说明 #

1. 原生JS替代jQuery方法：用classList.add()/classList.remove()替代jQuery的类操作方法，用addEventListener替代.one()监听动画结束事件，适配原生JS环境。
2. 修复CSS opacity错误：把opacity: 0px改成opacity: 0，确保大图初始状态为完全透明。
3. 强制重绘技巧：void lgImage.offsetWidth会强制浏览器重新计算元素尺寸，解决“移除类后立即添加不触发动画”的浏览器缓存问题。
4. 多浏览器兼容：同时监听animationend和webkitAnimationEnd事件，确保在Safari等webkit内核浏览器中正常工作。

这样修改后，每次点击缩略图，大图都会从透明平滑淡入显示了。

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