daviddahl/simplified-test-case-slider.html

## simplified-test-case-slider.html
<html>
  <head>
    <style>
      .slide{
        -webkit-transition:all .2s linear;
        -webkit-transform: translate3d(0,0,0);
        -moz-transition:all .2s linear;
        -moz-transform: translate3d(0,0,0);
        transform: translate3d(0,0,0);
      }

      #square {
        width: 400px;
        height: 400px;
        background-color: gray;
      }
    </style>

    <script>
      document.addEventListener('DOMContentLoaded', function () {
        var square = document.querySelector('#square');
        var slides = document.querySelectorAll('.slide');
        square.addEventListener('click', function () {
          for (var idx in slides) {
            console.log('transforming....');
            if (!slides[idx].style) {
              continue;
            }
            slides[idx].style['-webkit-transform'] = 'translate3d(85%,0,0)';
            slides[idx].style['-moz-transform'] = 'translate3d(85%,0,0)';
            slides[idx].style['transform'] = 'translate3d(85%,0,0)';
          }
        }, false);
      });
    </script>
  </head>
  <body>
    <div id="square" class="slide">

    </div>
  </body>
</html>
	<html>
	<head>
	<style>
	.slide{
	-webkit-transition:all .2s linear;
	-webkit-transform: translate3d(0,0,0);
	-moz-transition:all .2s linear;
	-moz-transform: translate3d(0,0,0);
	transform: translate3d(0,0,0);
	}

	#square {
	width: 400px;
	height: 400px;
	background-color: gray;
	}
	</style>

	<script>
	document.addEventListener('DOMContentLoaded', function () {
	var square = document.querySelector('#square');
	var slides = document.querySelectorAll('.slide');
	square.addEventListener('click', function () {
	for (var idx in slides) {
	console.log('transforming....');
	if (!slides[idx].style) {
	continue;
	}
	slides[idx].style['-webkit-transform'] = 'translate3d(85%,0,0)';
	slides[idx].style['-moz-transform'] = 'translate3d(85%,0,0)';
	slides[idx].style['transform'] = 'translate3d(85%,0,0)';
	}
	}, false);
	});
	</script>
	</head>
	<body>
	<div id="square" class="slide">

	</div>
	</body>
	</html>