如何用纯 JavaScript 控制变换距离

Question

我做了这个 http://codepen.io/adamchenwei/pen/dOvJNX

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

有没有办法我可以在 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>

Answer 1

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

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

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);

Answer 2

编辑

下面是Dennis Traub建议的方法

setTimeout(function() {
  console.log('ran');
  $("head").append('<style type="text/css"></style>');
var new_stylesheet = $("head").children(':last');
new_stylesheet.html('.myItem{animation: to-left-transition 600ms;}');
}, 3000);

.myItem {
  position: absolute;
  height: 100px;
  width: 501px;
  background-color: beige;
  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%);
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="item" class="myItem">
  stuff here
  
</div>

---

编辑前回答 这是一个很好的参考，类似于我认为你想要完成的事情。 根据您的动态输入，您可以拥有一个控制 div 转换距离的函数。仍然使用您的代码在 css 中进行转换，但计算您在 jquery 或 JavaScript 中想要多远。然后调用 css 转换来了解您想要转换多远或多长时间。

var boxOne = document.getElementsByClassName('box')[0],
    $boxTwo = $('.box:eq(1)');

document.getElementsByClassName('toggleButton')[0].onclick = function() {
  if(this.innerHTML === 'Play') 
  { 
    this.innerHTML = 'Pause';
    boxOne.classList.add('horizTranslate');
  } else {
    this.innerHTML = 'Play';
    var computedStyle = window.getComputedStyle(boxOne),
        marginLeft = computedStyle.getPropertyValue('margin-left');
    boxOne.style.marginLeft = marginLeft;
    boxOne.classList.remove('horizTranslate');    
  }  
}

$('.toggleButton:eq(1)').on('click', function() { 
  if($(this).html() === 'Play') 
  {
    $(this).html('Pause');
    $boxTwo.addClass('horizTranslate');
  } else {
    $(this).html('Play');
    var computedStyle = $boxTwo.css('margin-left');
    $boxTwo.removeClass('horizTranslate');
    $boxTwo.css('margin-left', computedStyle);
  }  
});

.box {
  margin: 30px;
  height: 50px;
  width: 50px;
  background-color: blue;
}
.box.horizTranslate {
  -webkit-transition: 3s;
  -moz-transition: 3s;
  -ms-transition: 3s;
  -o-transition: 3s;
  transition: 3s;
  margin-left: 100% !important;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h3>Pure Javascript</h3>
<div class='box'></div> 
<button class='toggleButton' value='play'>Play</button>

<h3>jQuery</h3>
<div class='box'></div> 
<button class='toggleButton' value='play'>Play</button>

此代码由 Zach Saucier 在 codepen 上编写

这是用 JS 操作 css 的一个很好的参考：https://css-tricks.com/controlling-css-animations-transitions-javascript/