How to control the transform distance with pure JavaScript

Question

I made this http://codepen.io/adamchenwei/pen/dOvJNX

and I try to apply a certain way of moving for a dom so it move for a fixed distance and stop, instead of animate an

Answer 1

EDIT

Below is a method sugguested by 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>

---

Answer Before EDIT Here is a good reference for something similar to what i think you are trying to accomplish. Based on your dynamic input you could have a function that controls how far the div transitions. Still use your code for transition in the css, but compute how far you want in the jquery or JavaScript. Then call the css transition for how far or long you want to transition.

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>

This code was written by Zach Saucier on codepen

This is a good reference for manipulating css with JS: https://css-tricks.com/controlling-css-animations-transitions-javascript/

Answer 2

Found out a better way. Soooooo much easier! I should have been using transition instead of animation. As that give me the flexibility to adjust the animation accordingly.

Hope it helps someone else to save couple hours!

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