I want my div on the right to transition from right to left, and the div on the left to transition from left to right.
The one on the left is naturally moving from left to right but how do I get the one the right to move from right to left.
This is the code that I have used.
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>when you use display:none you can't use transition you must edit you code same this codes to work
// 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';
}*/
change css to this codes
.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;
}