如何从自定义光标中删除缓动

Question

我在这里得到了一个用户的帮助，在我创建的自定义光标中添加了缓动，但我使用的是jQuery，帮助我的人提供了一个非常好用的普通JS解决方案，但现在我需要从光标中删除缓动，这是从那时起一直在做的。

​

  let cursor = document.querySelector('#custom-cursor');

  document.addEventListener('mousemove', evt => {
    document.body.classList.add('custom-cursor-moved')

    if (/Android|webOS|iPhone|iPad|iPod|BlackBerry|Windows Phone/i.test(navigator.userAgent)) {
      $('#custom-cursor').remove();
    } else {
      cursor.style.display = 'block';
    }


    let {
      clientX: x,
      clientY: y
    } = evt;
    let scale = 1;

    if (evt.target.matches('a,span,[onclick],img,video,i')) {
      cursor.classList.add('active');
      scale = 0.5;
    } else {
      cursor.classList.remove('active');
    }

    cursor.style.transform = `translate(${x}px, ${y}px) scale(${scale})`;

  });

* {
  cursor: none;
}


.custom-cursor-moved,
.custom-cursor-moved * {
  cursor: none !important;
}


#custom-cursor {
  display: none;
  position: fixed;
  width: 20px;
  height: 20px;
  top: -10px;
  left: -10px;
  border: 2px solid black;
  border-radius: 50%;
  opacity: 1;
  background-color: #fb4d98;
  pointer-events: none;
  z-index: 99999999;
  transition: transform ease-out 0.15s, border 0.5s, opacity 0.5s, background-color 0.5s;
}

#custom-cursor.active {
  opacity: 0.5;
  background-color: #000;
  border: 2px solid #fb4d98;
}

<div id="custom-cursor"></div>
<span>HOVER OVER ME</span>

​

Answer 1

要从x/y更改中删除easing，需要删除translate(x,y)

cursor.style.transform = `scale(${scale})`;

然后可以直接添加x/y (而不是通过转换)

cursor.style.top = `${y}px`
cursor.style.left = `${x}px`

更新的代码段

​

let cursor = document.querySelector('#custom-cursor');

  document.addEventListener('mousemove', evt => {
    document.body.classList.add('custom-cursor-moved')

    if (/Android|webOS|iPhone|iPad|iPod|BlackBerry|Windows Phone/i.test(navigator.userAgent)) {
      $('#custom-cursor').remove();
    } else {
      cursor.style.display = 'block';
    }


    let {
      clientX: x,
      clientY: y
    } = evt;
    let scale = 1;

    if (evt.target.matches('a,span,[onclick],img,video,i')) {
      cursor.classList.add('active');
      scale = 0.5;
    } else {
      cursor.classList.remove('active');
    }

    cursor.style.transform = `scale(${scale})`;
    cursor.style.top = `${y}px`
    cursor.style.left = `${x}px`

  });

#custom-cursor {
  display: none;
  position: fixed;
  width: 20px;
  height: 20px;
  top: -10px;
  left: -10px;
  border: 2px solid black;
  border-radius: 50%;
  opacity: 1;
  background-color: #fb4d98;
  pointer-events: none;
  z-index: 99999999;
  transition: transform ease-out 0.15s, border 0.5s, opacity 0.5s, background-color 0.5s;
}

#custom-cursor.active {
  opacity: 0.5;
  background-color: #000;
  border: 2px solid #fb4d98;
}

<div id="custom-cursor"></div>
<span>HOVER OVER ME</span>

​

Answer 2

导致缓解效果的行如下：

transition: transform ease-out 0.15s, border 0.5s, opacity 0.5s, background-color 0.5s;

所以只要删除它就可以做你想做的事情。如果您习惯了jQuery，那么您可能正在寻找javascript本身的解决方案。

不可能编写css来影响缩放的过渡，但不能影响位置。如果这是您需要的，那么您必须将其包装在另一个元素中。

 <div id="cursor-position"><div id="custom-cursor"></div></div>

#cursor-position {
  position: fixed;
}

let cursorPosition = document.querySelector("#cursor-position");
let cursor = document.querySelector("#custom-cursor");
// ...
cursor.style.transform = `scale(${scale})`;
cursorPosition.style.transform = `translate(${x}px, ${y}px)`;