如何在点击时为CSS类应用已定义的动画？已尝试方案未生效

嘿，我来帮你解决这个困扰！你已经有了绿色方块的CSS类和摇晃动画，只是没找到正确的点击触发方式对吧？我整理了两种靠谱的实现方案，纯CSS和JS/jQuery版本都有，顺便说下你之前可能踩的坑~

先理下基础代码（假设你现有的代码是这样） #

先把你提到的绿色方块类和摇晃动画贴出来（如果和你的实际代码有出入，调整下参数就行）：

/* 你的绿色方块类 */
.green-square {
  width: 100px;
  height: 100px;
  background-color: green;
}

/* 你的摇晃动画 */
@keyframes shake {
  0% { transform: translateX(0); }
  25% { transform: translateX(-5px); }
  50% { transform: translateX(0); }
  75% { transform: translateX(5px); }
  100% { transform: translateX(0); }
}

方案1：纯CSS实现（不用写JS） #

如果不想碰JS，纯CSS也能搞定，分两种场景：

场景A：点击按住时摇晃，松开停止 #

这种最简单，用:active伪类直接触发动画：

.green-square:active {
  animation: shake 0.5s ease-in-out infinite;
}

要是想点击后摇晃几次再停，把infinite改成具体次数就行：

.green-square:active {
  animation: shake 0.5s ease-in-out 3 forwards; /* 摇晃3次后停在结束状态 */
}

场景B：点击一次开始摇晃，再点击停止 #

如果需要切换摇晃状态，用隐藏复选框+兄弟选择器就可以，很巧妙：

<!-- 调整下HTML结构，加个隐藏的复选框 -->
<input type="checkbox" id="shake-switch" hidden>
<!-- 把绿色方块改成复选框的label，点击就会触发状态切换 -->
<label for="shake-switch" class="green-square"></label>

然后加CSS：

#shake-switch:checked + .green-square {
  animation: shake 0.5s ease-in-out infinite;
}

这样点一下方块开始摇，再点一下就停，完全不用JS~

方案2：JS/jQuery实现（更灵活） #

你之前用jQuery没生效？大概率是没处理动画的重置问题！连续点击时，动画如果还在运行，直接加类是不会触发新动画的，得先重置状态。

纯JS版本 #

先给动画单独整个类：

.shake-it {
  animation: shake 0.5s ease-in-out 3; /* 这里的3是摇晃次数，改infinite就是一直摇 */
}

然后写JS逻辑：

const square = document.querySelector('.green-square');

square.addEventListener('click', () => {
  // 先移除动画类，重置状态
  square.classList.remove('shake-it');
  // 强制浏览器重绘，不然移除类后直接加不会生效
  void square.offsetWidth;
  // 再添加动画类，触发摇晃
  square.classList.add('shake-it');
  
  // 可选：动画结束后自动移除类，方便下次点击
  square.addEventListener('animationend', () => {
    square.classList.remove('shake-it');
  }, { once: true });
});

jQuery版本 #

对应jQuery的写法，逻辑一样：

$('.green-square').on('click', function() {
  // 先移除类重置
  $(this).removeClass('shake-it');
  // 强制重绘
  void $(this)[0].offsetWidth;
  // 添加动画类
  $(this).addClass('shake-it');
  
  // 动画结束后移除类
  $(this).one('animationend', function() {
    $(this).removeClass('shake-it');
  });
});

你之前可能踩的坑 #

1. 动画优先级不够：如果你的.green-square类里写了transform，可能会覆盖动画的transform，确保动画类的优先级更高（比如用.green-square.shake-it这种更具体的选择器）
2. 没重置动画状态：连续点击时，动画还在运行，直接加类不会触发新动画，必须先移除类再强制重绘
3. 纯CSS的:active限制：:active只在按住鼠标时生效，松开就停，如果你需要点击后持续摇晃，这个方案就不适用，得用上面的复选框或者JS方案

内容的提问来源于stack exchange，提问作者Robert Ţiganetea