如何让 css 转换不影响我的 javascript

Question

我有一个跟随光标的圆圈，当我将鼠标悬停在任何文本上时，我也使其展开。问题是当我尝试向 CSS 添加

transition: 2s;

以使其顺利展开时。当我添加它时，它会破坏我的 JavaScript 动画，所以我想知道是否可以仅在圆圈展开时添加一个过渡时间。

我也厌倦了将

transition: 2s;

添加到

.mouseFollowCircle.big

类中，但仅当我将鼠标悬停在文本上时，它才会对 JavaScript 造成相同的问题

document.addEventListener('DOMContentLoaded', () => {
  const interBubble = document.getElementById('circle');
  let curX = 0;
  let curY = 0;
  let tgX = 0;
  let tgY = 0;

  function move() {
    curX += (tgX - curX) / 10;
    curY += (tgY - curY) / 10;
    interBubble.style.transform = `translate(${Math.round(curX)}px, ${Math.round(curY)}px)`;
    requestAnimationFrame(() => {
      move();
    });
  }

  window.addEventListener('mousemove', (e) => {
    tgX = e.clientX;
    tgY = e.clientY;

    if (e.target.tagName === 'P' ||
      e.target.tagName === 'A' ||
      e.target.tagName === 'BUTTON' ||
      e.target.parentNode.tagName === 'BUTTON') {
      interBubble.classList.add('big');
    } else {
      interBubble.classList.remove('big');
    }
  });

  move();
});

Body {
  background-color: black;
  overflow: hidden;
}

div {
  width: 100%;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

p {
  color: white;
  font-size: 30px;
}

.mouseFollowCircle {
  width: 50px;
  height: 50px;
  border: 3px solid white;
  border-radius: 999px;
  position: absolute;
  z-index: 999;
  top: -25px;
  left: -25px;
  box-shadow: 0 0 10px white;
  pointer-events: none;
  backdrop-filter: blur(2px);
}

.mouseFollowCircle.big {
  width: 70px;
  height: 70px;
  border-radius: 999px;
  border: 1px solid white;
  position: absolute;
  z-index: 999;
  top: -35px;
  left: -35px;
  box-shadow: 0 0 10px white;
  pointer-events: none;
  backdrop-filter: blur(2px);
}

<div><p>Hello</p></div>
<section class="mouseFollowCircle" id="circle"></section>

Answer 1

为了实现扩展效果，只需调整

.mouseFollowCircle

类中必要的属性即可。

document.addEventListener('DOMContentLoaded', () => {
  const interBubble = document.getElementById('circle');
  let curX = 0;
  let curY = 0;
  let tgX = 0;
  let tgY = 0;

  function move() {
    curX += (tgX - curX) / 10;
    curY += (tgY - curY) / 10;
    interBubble.style.transform = `translate(${Math.round(curX)}px, ${Math.round(curY)}px)`;
    requestAnimationFrame(() => {
      move();
    });
  }

  window.addEventListener('mousemove', (e) => {
    tgX = e.clientX;
    tgY = e.clientY;

    if (e.target.tagName === 'P' ||
      e.target.tagName === 'A' ||
      e.target.tagName === 'BUTTON' ||
      e.target.parentNode.tagName === 'BUTTON') {
      interBubble.classList.add('big');
    } else {
      interBubble.classList.remove('big');
    }
  });

  move();
});

Body {
  background-color: black;
  overflow: hidden;
}

div {
  width: 100%;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

p {
  color: white;
  font-size: 30px;
}

.mouseFollowCircle {
  width: 50px;
  height: 50px;
  border: 3px solid white;
  border-radius: 999px;
  position: absolute;
  z-index: 999;
  top: -25px;
  left: -25px;
  box-shadow: 0 0 10px white;
  pointer-events: none;
  backdrop-filter: blur(2px);
  transition: width 1s ease, height 1s ease, border 1s ease, top 1s ease, left 1s ease;
}

.mouseFollowCircle.big {
  width: 70px;
  height: 70px;
  border-width: 1px;
  top: -35px;
  left: -35px;
}

<div><p>Hello</p></div>
<section class="mouseFollowCircle" id="circle"></section>