代码之家  ›  专栏  ›  技术社区  ›  oiishik

从右向左过渡<Div>

  •  0
  • oiishik  · 技术社区  · 3 年前

    我希望右侧的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>
    0 回复  |  直到 3 年前
        1
  •  0
  •   Majid Ahmadi    3 年前

    当你使用display:none时,你不能使用transition 您必须编辑与此代码相同的代码 工作

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