javascript - 如何使用 JS 为鼠标 X 和 Y 坐标添加平滑过渡？

Question

我创建了一个让 DOM 元素跟随鼠标光标的函数。 http://codepen.io/anon/pen/AXdxZO?editors=0110

当您将鼠标悬停在每个元素上时，指针将跟随您的鼠标移动。现在我正在寻找可以添加到此代码中的一些不错的动画。我正在考虑轻松过渡的一点延迟。我已经尝试使用 transition: all 0.1s ease; 但这有点问题，而且不够“平滑”。我知道还有一种叫做 cubic 的东西，但我不知道这是否是我所需要的。

我认为应该有一个函数可以缓和鼠标的 X 和 Y 坐标，并添加一点平滑的延迟。

委托(delegate)鼠标移动的部分是:

function mouseMove(event) {
  var target = $(this);
  var dot = target.find('.pointer');

  var height = dot.height();
  var width = dot.width();

  var offset = target.offset();
  var w = target.width();
  var h = target.height();
  var top = offset.top;
  var left = offset.left;
  console.log(left);

  var mX = (event.clientX - left) - width / 2 - 15; // 15 = padding
  var mY = (event.clientY - top) - height / 2;

  $(dot).css('-webkit-transform', 'translate3d(' + mX + 'px , ' + mY + 'px, 0) scale(1, 1)');

};

指针 CSS:

.pointer {  
  position: absolute;
  z-index: 1;
  width: 25%;
  position: relative;
  border-radius: 50%;
  box-shadow: 0 5px 3px rgba(0, 0, 0, .1);
      transform: translateZ(0) scale(0);
      -webkit-transform: translateZ(0) scale(0);
}

.pointer:before {
  content: "";
  display: block;
  padding-top: 100%;
}

有没有人有一些我应该需要的建议、资源或代码部分。

另一个我想流畅地制作动画的是 pointer 类的 scale 属性。当鼠标进入缩略图时，它应该缩放到 1，如果离开该区域，它应该缩放回零。

期待您的回复。提前谢谢你。

Answer 1

以下是我所做的一切:-)

*{  -webkit-transition:1s;
transition:1s;
-webkit-transition-timing-function: cubic-bezier(0.42,0,0.58,1);
transition-timing-function: cubic-bezier(0.42,0,0.58,1);}

干杯