javascript - 使用缓动曲线的 Css 变换

Question

我想使用变换为元素位置设置动画。我怎么能在这个翻译中添加一些曲线(没什么特别的，只是不是一条完整的直线)？对于 jquery，我会使用效果很好的 easeInSine。

var a = document.querySelector('.a')
document.querySelector('.button').addEventListener('click', function() {

  var ww = window.innerWidth - (window.pageXOffset || document.documentElement.scrollLeft),
    wh = window.innerHeight - (window.pageYOffset || document.documentElement.scrollTop),
    rect = a.getBoundingClientRect(),

    final_left = ww - rect.left - a.offsetWidth,
    final_top = wh - rect.top - a.offsetHeight


  a.style.transform = "translate(" + final_left + "px," + final_top + "px)";


})

.a {
  position: absolute;
  top: 0;
  left: 0;
  width: 50px;
  height: 50px;
  background: red;
  transition: all 0.4s;
}

.button {
  margin-left:100px;
}

<div class="a">

</div>

<button class="button">
  run
</button>

Answer 1

据我所知，这对于像“transform”这样的单个属性是不可能的。

对于圆周运动，您需要能够为 x 轴和 y 轴运动设置不同的过渡时间。如果您对 x 移动和 y 移动都使用专用的过渡属性，则 CSS 只能执行此操作。

由于变换属性不能像这样拆分，您需要更改代码以使用“左”和“顶”属性，并为每个移动添加不同的过渡时间。

我以这种方式更新了您的示例，现在对象以 flex 的路径移动。

var a = document.querySelector('.a')
document.querySelector('.button').addEventListener('click', function() {

  var ww = window.innerWidth - (window.pageXOffset || document.documentElement.scrollLeft),
    wh = window.innerHeight - (window.pageYOffset || document.documentElement.scrollTop),
    rect = a.getBoundingClientRect(),

    final_left = ww - rect.left - a.offsetWidth,
    final_top = wh - rect.top - a.offsetHeight


    a.style.left = final_left + "px"  ;
    a.style.top = final_top + "px";


})

.a {
  position: absolute;
  top: 0;
  left: 0;
  width: 50px;
  height: 50px;
  background: red;
  transition: top 0.8s ease-in, left 0.8s ease-out;
}

.button {
  margin-left:100px;
}

<div class="a">

</div>

<button class="button">
  run
</button>