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

找到更好的方法。 Soooooo更容易！我本应该使用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提出的方法

＆＃13;
＆＃13;
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);
＆＃13;
.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%); } }
＆＃13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="item" class="myItem"> stuff here </div>
＆＃13;
＆＃13;
＆＃13;

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

＆＃13;
＆＃13;
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); } });
＆＃13;
.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; }
＆＃13;
<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>
＆＃13;
＆＃13;
＆＃13;

本代码由Zach Saucier在codepen
撰写
这是使用JS操作css的一个很好的参考：https://css-tricks.com/controlling-css-animations-transitions-javascript/

如何使用纯JavaScript控制变换距离

2 个答案: