Quiero que mi div de la derecha haga la transición de derecha a izquierda y que el div de la izquierda haga la transición de izquierda a derecha.
El de la izquierda se mueve naturalmente de izquierda a derecha, pero ¿cómo hago para que el de la derecha se mueva de derecha a izquierda?
Este es el código que he usado.
function showmeme(){ document.getElementById('memes').style.width = "100%"; document.getElementById('game').style.width = "0%"; document.getElementById("memes").style.transition = "all 0.5s"; document.getElementById("game").style.transition = "all 0.5s"; var game= document.getElementsByClassName('game'); for(var i=0;i<game.length;i++){ game[i].style.display='none'; } } function showgame(){ document.getElementById('game').style.width = "100%"; document.getElementById('memes').style.width = "0%"; document.getElementById("memes").style.transition = "all 0.5s"; document.getElementById("game").style.transition = "all 0.5s"; var memes= document.getElementsByClassName('memes'); for(var i=0;i<memes.length;i++){ memes[i].style.display='none'; } } .body{ border: 1px solid black; display: flex; justify-content: space-between; align-items: center; margin-top: 10px; } .memes{ display: flex; justify-content: center; align-items: center; border: 1px solid black; width:48%; height: 500px; } .game{ display: flex; justify-content: center; align-items: center; border: 1px solid black; width:48%; height: 500px; } .butn{ width: 200px; height: 50px; } <div class="body"> <div class="memes" id="memes"> <button class="butn" onclick="showmeme()">make a meme</button> </div> <div class="game" id="game"> <button class="butn" onclick="showgame()">play meme games</button> </div> </div>cuando usa display: none, no puede usar la transición, debe editar su código mismo, estos códigos funcionan
// comment this lines /* for(var i=0;i<game.length;i++){ game[i].style.display='none'; }*/ //comment this line /*for(var i=0;i<memes.length;i++){ memes[i].style.display='none'; }*/cambiar css a estos códigos
.memes{ display: flex; justify-content: center; align-items: center; border: 1px solid black; width:48%; height: 500px; //do this overflow:hidden; } .game{ display: flex; justify-content: center; align-items: center; border: 1px solid black; width:48%; height: 500px; //do this overflow:hidden; }