How To Control The Transform Distance With Pure Javascript

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 and move thro

Solution 1:

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

<divclass="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);

Solution 2:

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

<scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><divid="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;
}

<scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><h3>Pure Javascript</h3><divclass='box'></div><buttonclass='toggleButton'value='play'>Play</button><h3>jQuery</h3><divclass='box'></div><buttonclass='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/