如何用纯JavaScript控制变换距离

我做的http://codepen.io/adamchenwei/pen/dOvJNX http://codepen.io/adamchenwei/pen/dOvJNX

我尝试对 dom 应用某种移动方式，使其移动固定距离并停止，而不是动画并移动穿过 dom 的整个宽度。但是，我真的不想修复CSS内的距离keyframe因为我需要动态检测该距离，因为理想情况下动画化的 div 也会动态改变宽度，因为宽度并不总是 100% 或任何特定的px fixed.

有没有办法可以在 JavaScript 中做到这一点，而不让 css 负责这个变换距离部分？ 跨浏览器的能力会很大。

SCSS

.myItem {
  height: 100px;
  width: 501px;
  background-color: beige;
  animation: to-left-transition 300ms;
  animation-iteration-count: 1;
  animation-fill-mode: forwards;
  animation-timing-function: ease-in-out;
}


@keyframes to-left-transition {
  0% {
    transform: translate(0);
  }
  100% {
    transform: translate(100%);
  }
}

HTML

<div class="myItem">
  stuff here

</div>

找到了更好的方法。太容易了！ 我应该一直在使用transition而不是动画。这样我就可以灵活地相应调整动画。

希望它可以帮助其他人节省几个小时！

http://codepen.io/adamchenwei/pen/xRqYNj http://codepen.io/adamchenwei/pen/xRqYNj

HTML

<div class="myItem">
  stuff here

</div>

CSS

.myItem {
  position: absolute;
  height: 100px;
  width: 501px;
  background-color: beige;
  transition: transform 1s;  
}

JS

setTimeout(function() {
  document.getElementsByClassName('myItem')[0].style.transform="translateX(400px)";
  console.log('ran');
}, 3000);