<Div> 从右到左过渡答案

【问题标题】：Transition <Div> from right to left<Div> 从右到左过渡
【发布时间】：2022-01-31 20:01:05
【问题描述】：

我希望右侧的 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>

【问题讨论】：

尝试在 game[i].style.visibility='hidden'; 中设置可见性而不是显示，这样 div 在动画时保持在原位。但是这样做你还必须隐藏 div 内的按钮。

标签： javascript html css css-transitions

【解决方案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;
    }

【讨论】：