从右到左过渡 <Div>

Question

我想让右边的div从右到左过渡，左边的div从左到右过渡。

左边的自然是从左向右移动，但是如何让右边的从右向左移动。

这是我用过的代码。

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>

Answer 1

当您使用 display:none 时，您不能使用过渡你必须编辑你的代码相同的代码上班

// 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';
    }*/

将css更改为此代码

    .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;
    }

从右到左过渡 <Div>

Transition <Div> from right to left

html

javascript

css

css-transitions