改变html过渡效果点击之后一直抖动

如果您在使用 CSS 过渡效果时遇到了点击后元素一直抖动的问题，可能是由于触发了多次过渡效果导致的。有两种方法可以解决这个问题：

1. 禁用元素的交互效果

您可以在触发过渡效果时，使用 CSS 的 `pointer-events` 属性将元素的交互效果禁用。这样可以确保元素在过渡期间不会被重复点击，从而避免出现抖动的问题。例如：

.element {
  pointer-events: none;
  transition: all 0.3s ease;
}

在 JavaScript 中触发过渡效果时，可以先将 `pointer-events` 属性设置为 `none`，等过渡效果结束后再将其设置回默认值，如下所示：

const element = document.querySelector('.element');
element.style.pointerEvents = 'none';
setTimeout(() => {
  element.style.pointerEvents = 'auto';
}, 300);

在这个例子中，我们将 `pointer-events` 属性设置为 `none`，并使用 `setTimeout` 函数在过渡效果结束后将其设置回默认值。

2. 防止重复触发过渡效果

另一种方法是在 JavaScript 中防止重复触发过渡效果。您可以使用一个变量来记录过渡效果是否已经触发，避免在过渡期间重复触发过渡效果。例如：

let isTransitioning = false;
const element = document.querySelector('.element');
element.addEventListener('click', () => {
  if (!isTransitioning) {
    isTransitioning = true;
    element.classList.add('transition');
    setTimeout(() => {
      element.classList.remove('transition');
      isTransitioning = false;
    }, 300);
  }
});

在这个例子中，我们使用一个名为 `isTransitioning` 的变量来记录过渡效果是否已经触发。在点击事件中，如果 `isTransitioning` 为 `false`，则表示可以触发过渡效果。我们将 `isTransitioning` 设置为 `true`，并在元素上添加过渡效果的 CSS 类名（例如 `transition`）。然后使用 `setTimeout` 函数在过渡效果结束后再将其移除，并将 `isTransitioning` 设置为 `false`，以便下一次触发过渡效果。