求助：无法通过JS事件监听实现CSS transform: scale()切换效果

看起来你的代码逻辑本身是没问题的，但可能是一些细节导致效果没显现出来。我来帮你排查并解决这个问题：

首先，试试这个修改后的完整代码（确保能看到明显效果） #

<button>Click!</button>
<div>Some text...</div>

div {
  transform: scale(0);
  transition: transform 0.5s ease;
  /* 给div加一些可见样式，方便观察缩放效果 */
  width: 200px;
  padding: 20px;
  background-color: #f0f0f0;
  margin-top: 20px;
}

.divDisplay {
  transform: scale(1);
}

window.addEventListener("load", function() { 
  const button = document.querySelector("button"); 
  button.addEventListener("click", clicked); 
});

function clicked(){ 
  const div = document.querySelector("div"); 
  div.classList.toggle("divDisplay");
  // 加个调试日志，确认函数是否执行、类是否正确切换
  console.log("当前div的类:", div.className);
}

可能的问题点及排查步骤 #

1. div没有可见样式，导致缩放变化不明显
   你原来的div只有文本，没有背景、宽高，scale(0)后文本完全消失，scale(1)时突然出现，可能让你误以为没有过渡效果。给div加个背景和固定尺寸，就能清晰看到缩放动画了。

2. 类名拼写错误
   检查JS里的divDisplay和CSS里的类名是否完全一致（大小写、拼写都要一模一样），哪怕一个字母错了都不会生效。

3. 事件绑定失败
   点击按钮时打开浏览器控制台（F12），看是否输出了调试日志。如果没有，说明clicked函数没被调用，可能是window.load事件绑定的问题——如果你的JS代码放在HTML末尾（</body>之前），其实可以去掉window.addEventListener("load")，直接写按钮绑定逻辑，避免等待load事件的延迟。

4. CSS优先级冲突
   如果你的真实代码里还有其他针对div的CSS规则，可能覆盖了transform属性。可以临时给.divDisplay加!important测试：

   .divDisplay{ transform: scale(1)!important; }
   

   如果生效了，说明是优先级问题，你可以通过提高.divDisplay的选择器权重来解决（比如写成div.divDisplay）。

5. 过渡属性设置问题
   试试把transition: transform 1s;改成transition: all 0.5s ease;，确保过渡能正确触发。

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