How to control the transform distance with pure Ja

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 and move through the whole width of the dom. However, I don't really want to fix the distance inside the css keyframe because I need to detect that distance dynamically, since my div that got animated ideally will change the width dynamically as well since that is not going always be 100% or any specific px fixed.

Is there way I can do that in JavaScript instead and not let css to take charge in this transform distance part? Cross browser capacity will be great.

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

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

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

<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/