JSFiddle - React, Tailwind, and code Playground

by Ishank Dubey

HTML

<div id='container'>
<div class='slider'>
<img id='one' class='one' src='https://s3-us-west-1.amazonaws.com/sfdc-demo/realty/house08.jpg' width='100%' />
<img id= 'two' class='two' src='https://s3-us-west-1.amazonaws.com/sfdc-demo/realty/house09.jpg' width='100%' />
</div>
<button id='animate'>Animate</button>
</div>

CSS

#container{
  background-color:red;
  width:100%;
  height:100vh;
  position:relative;
}
.slider{
  position:relative;
  width:100%;
  text-align:center;
  background-color:green;
  overflow-x:hidden;
}
img{
  -webkit-transition:  1s;
  -moz-transition:  1s;
  -o-transition:  1s;
  transition:  1s;
}
img.one{
  position:relative;
  left:0%;
  top:0;
  display:none;
}

img.two{
  position:absolute;
  left:100%;
  top:0;
}

JavaScript

document.getElementById('animate').addEventListener('click',function(e){
console.log(document.getElementById('one').style.display);
if(document.getElementById('one').style.left.match('0%')){
document.getElementById('one').style.left = '-100%';
document.getElementById('two').style.left = '0%';
}else {
document.getElementById('one').style.left = '0%';
document.getElementById('two').style.left = '100%';
}

})

document.addEventListener('webkitTransitionEnd',function(e){
alert('ended');
})