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('');
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%);
  }
}

  stuff here
  

---

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

Pure Javascript
 
Play

jQuery
 
Play

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/