CSS Sliding transition

Question

I am trying achieve a sliding effect using CSS transition and some Javascript. The problem is second box disappears right away instead of sliding. Is there a way that I can achieve to smoothen the effect so that secondary box does not disappear instead it slides too.

I also would like to disable the animation on PageLoad if possible.

 var page1 = document.getElementById('page1'); var page2 = document.getElementById('page2'); var nxtbtn = document.querySelector('button[name="nxtbtn"]'); var prvbtn = document.querySelector('button[name="prvbtn"]'); function buttonDisabler() { if (page1.style.display == 'none') { nxtbtn.style.display = 'none'; prvbtn.style.display = 'block'; } if (page2.style.display == 'none') { prvbtn.style.display = 'none'; nxtbtn.style.display = 'block'; } } page2.style.display = 'none' buttonDisabler(); nxtbtn.addEventListener('click', function() { page1.style.display = (page1.style.display == 'none') ? 'block' : 'none'; page2.style.display = (page2.style.display == 'block') ? 'none' : 'block'; buttonDisabler(); }, false); prvbtn.addEventListener('click', function() { page1.style.display = (page1.style.display == 'block') ? 'none' : 'block'; page2.style.display = (page2.style.display == 'none') ? 'block' : 'none'; buttonDisabler(); }, false); 

 .content { clear: both; overflow: hidden; height: 250px; width: 250px; } .navigation { position: absolute } .slideLeft { animation-name: slideLeft; -webkit-animation-name: slideLeft; animation-duration: 1s; -webkit-animation-duration: 1s; animation-timing-function: ease-in-out; -webkit-animation-timing-function: ease-in-out; visibility: visible !important; } @keyframes slideLeft { 0% { transform: translateX(150%); } 100% { transform: translateX(0%); } } @-webkit-keyframes slideLeft { 0% { -webkit-transform: translateX(150%); } 100% { -webkit-transform: translateX(0%); } } /* ============================================== slideRight ============================================== */ .slideRight { animation-name: slideRight; -webkit-animation-name: slideRight; animation-duration: 500ms; -webkit-animation-duration: 500ms; animation-timing-function: ease-in-out; -webkit-animation-timing-function: ease-in-out; visibility: visible !important; } @keyframes slideRight { 0% { transform: translateX(-150%); } 100% { transform: translateX(0%); } } @-webkit-keyframes slideRight { 0% { -webkit-transform: translateX(-100%); } 100% { -webkit-transform: translateX(0%); } } /* 

 <div class="content"> <div id="page1" class="slideLeft"> <img src="http://placehold.it/250/323412/fff" /> </div> <div id="page2" class="slideRight"> <img src="http://placehold.it/250/321343/fff" /> </div> </div> <div class="navigation"> <button name="prvbtn"> <</button> <button name="nxtbtn">></button> </div> 

Answer 1

It is because you are using display: none; to hide the hidden slide. You would need to use an overflow: hidden; on the wrapping container, and then just let the slides slide in and out of view.

Answer 2

Not using display property seems like solved the problem. Here is the solution, if somebody interested: https://jsfiddle.net/Tankucukhas/5ytd75o1/1/

 var page1 = document.getElementById('page1'); var page2 = document.getElementById('page2'); var nxtbtn = document.querySelector('button[name="nxtbtn"]'); var prvbtn = document.querySelector('button[name="prvbtn"]'); function hasClass(element, cls) { return (' ' + element.className + ' ').indexOf(' ' + cls + ' ') > -1; } function buttonDisabler() { if (hasClass(page2, 'slideRight') === true) { nxtbtn.style.display = 'none'; prvbtn.style.display = 'block'; } } prvbtn.style.display = 'none'; nxtbtn.addEventListener('click', function () { page1.className = "slideRight"; page2.className = "slideRight"; buttonDisabler(); }, false); prvbtn.addEventListener('click', function () { page1.className = "slideLeft"; page2.className = "slideLeft"; buttonDisabler(); }, false); 

 #wrapper { width:500px; position: relative; left: 0; transition: left .5s ease-in-out; } .contentContainer { -webkit-transition:1s; overflow: hidden; width:250px; } #page1, #page2 { float:left; -webkit-transition:1s; position: relative; } .slideRight { transform: translateX(-100%); } .slideLeft { transform: translateyx(100%); } 

 <div class="contentContainer"> <div id="wrapper"> <div id="page1"> <img src="http://placehold.it/250/CFCFC4/000" /> </div> <div id="page2"> <img src="http://placehold.it/250/C23B22/fff" /> </div> <div id="wrapper"></div> <div class="navigation"> <button name="prvbtn">previous</button> <button name="nxtbtn">next</button> </div>