如何啓動CSS過渡從左

我有四個div的，我已經應用的JavaScript過渡屬性來增加點擊按鈕的寬度和高度，但我需要增加高度和寬度在同一個屏幕如何啓動CSS過渡從左

我想要在按鈕上點擊這些div應該保留在這個屏幕中。現在當我按下跟蹤框的按鈕（+）時，它將增加寬度和高度到屏幕右側，在左側增加寬度和高度以增加它保持在同一屏幕上並與其他div重疊。

function changec() { 
    var xDiv = document.getElementById('div1'); 

    if (xDiv.style.height == '') 
     xDiv.style.height = '480px' 
    else 
     xDiv.style.height = '' 

    if (xDiv.style.width == '') 
     xDiv.style.width = '850px' 
    else 
     xDiv.style.width = '' 
} 
function changec2() { 
    var xDiv = document.getElementById('div2'); 

    if (xDiv.style.height == '') 
     xDiv.style.height = '480px' 
    else 
     xDiv.style.height = '' 

    if (xDiv.style.width == '') 
     xDiv.style.width = '850px' 
    else 
     xDiv.style.width = '' 
} 
function changec3() { 
    var xDiv = document.getElementById('div3'); 

    if (xDiv.style.height == '') 
     xDiv.style.height = '480px' 
    else 
     xDiv.style.height = '' 

    if (xDiv.style.width == '') 
     xDiv.style.width = '850px' 
    else 
     xDiv.style.width = '' 
} 
function changec4() { 
    var xDiv = document.getElementById('div4'); 

    if (xDiv.style.height == '') 
     xDiv.style.height = '480px' 
    else 
     xDiv.style.height = '' 

    if (xDiv.style.width == '') 
     xDiv.style.width = '850px' 
    else 
     xDiv.style.width = '' 
} 

.gh{width:96%;height:auto;padding:10px;border:1px solid #aaaaaa;clear: both;margin:10px 10px 10px 10px;overflow:none; 
    position: relative; 
    display: block; 

} 

.leftbox{clear: both; 
    border:2px solid green; 
    float: left; 
    width: 100%; 
    height: 280px; 
    margin: 5px; 
    overflow: none; 
    overflow:scroll; 
    transition: all 0.2s ease; 
    z-index: 1000; 
    background:white; 
    position: absolute; 



} 
.leftbox2{ 
    border:2px solid green; 
    float: left; 
    width: 100%; 
    height: 280px; 
    margin: 5px; 
    overflow: none; 
    overflow:scroll; 
    transition: all 1s ease; 
z-index: 1; 
    background:white; 
    position: absolute; 



} 
.rightbox{clear: both; 
    border:3px solid red; 
    float: left; 
    width: 100%; 
    height: 280px; 
    margin: 5px; 
    overflow:scroll; 
    transition: all 2s ease; 



} 
.rightbox2{clear: both; 
    border:3px solid red; 
    float: left; 
    width: 100%; 
    height: 280px; 
    margin: 5px; 
    overflow:scroll; 
    transition: all 2s ease; 



} 

ul{ 
    list-style-type: none; 
} 
.go{ 
min-height:300px; 
height: 800px; 
width: 100%; 
overflow:scroll; 

    } 
    .btn{ 
    width: 100%; 
    } 


<div class="col-md-8 red"> 
<div class="col-md-6"> 
<h4 style="text-align:center">Done</h4> 

<section class="leftbox" id="div1" ondrop="drop(event)" ondragover="allowDrop(event)" > 
<button id="menu" onclick="changec()" class="pull-right fixed-top">+</button> 
    </section> 
</div> 

<div class="col-md-6"> 
<h4 style="text-align:center">Tracking</h4> 
<section class="rightbox" id="div2" ondrop="drop(event)" ondragover="allowDrop(event)"> 
<button id="menu" onclick="changec2()" class="pull-right fixed-top">+</button> 
</section> 
</div> 
<div class="col-md-6"> 
<h4 style="text-align:center">Pursuing</h4> 

<section class="leftbox2" id="div3" ondrop="drop(event)" ondragover="allowDrop(event)"> 

    <button id="menu" onclick="changec3()" class="pull-right fixed-top">+</button> 
</section> 
</div> 
<div class="col-md-6"> 
<h4 style="text-align:center">Dropped</h4> 

<section class="rightbox2" id="div4" ondrop="drop(event)" ondragover="allowDrop(event)"> 

    <button id="menu" onclick="changec4()" class="pull-left fixed-top">+</button> 
</section> 
</div> 
</div>

來源

2016-07-15 Sarthak Tuteja

我真的不知道你想什麼，但是這是我想出了：

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <meta charset="utf-8" /> 
    <meta http-equiv="X-UA-Compatible" content="IE=edge" /> 
    <title></title> 
    <link rel="stylesheet" href="css/style.css" type="text/css"/> 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous"> 
    <script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script> 
    <script src="js/animate.js" type="text/javascript"></script> 
    </head> 
    <body> 
     <div class="container"> 
      <div class="row"> 
       <div class="col-md-6"> 
        <h2>Done</h2> 
       </div> 
       <div class="col-md-6"> 
        <h2>Tracking</h2> 
       </div> 
      </div> 
      <div class="row boxes"> 
       <div class="col-md-6"> 
        <div class="box first"> 
         <button class="left btn btn-default" onclick="change('.first')" type="button">+</button> 
        </div> 
       </div> 
       <div class="col-md-6"> 
        <div class="box second"> 
         <button class="right btn btn-default" onclick="change('.second')" type="button">+</button> 
        </div> 
       </div> 
      </div> 
      <div class="row"> 
       <div class="col-md-6"> 
        <h2>Pursuing</h2> 
       </div> 
       <div class="col-md-6"> 
        <h2>Dropped</h2> 
       </div> 
      </div> 
      <div class="row boxes"> 
       <div class="col-md-6"> 
        <div class="box third"> 
         <button class="left btn btn-default" onclick="change('.third')" type="button">+</button> 
        </div> 
       </div> 
       <div class="col-md-6"> 
        <div class="box fourth"> 
         <button class="right btn btn-default" onclick="change('.fourth')" type="button">+</button> 
        </div> 
       </div> 
      </div> 
     </div> 
    </body> 
</html>

CSS：

.container { 
    height: 1000px; 
} 

.col-md-6 { 
    position: relative; 
} 

.boxes .col-md-6 { 
    max-height: 280px; 
    min-height: 280px; 
} 

.box { 
    position: absolute; 
    border: 2px solid black; 
    width: 100%; 
    height: 280px; 
    transition: all 0.5s ease-in-out; 
} 

.right { 
    float: right; 
} 

.first { 
    top: 63; 
    left: 0; 
    z-index: 1; 
} 

.second { 
    top: 63; 
    right: 0; 
    z-index: 2; 
} 

.third { 
    bottom: 0; 
    left: 0; 
    z-index: 3; 
} 

.fourth { 
    bottom: 0; 
    right: 0; 
    z-index: 4; 
}

的jQuery：

function change(box) { 
    if ($(box).css('height') == '280px') { 
     $(box).css({ 
      'width': '850px', 
      'height': '480px' 
     }); 
    } else { 
     $(box).css({ 
      'width': '100%', 
      'height': '280px' 
     }); 
    } 
}

我把它們全部放到一個函數中，因爲好的編程實踐冰是違反冗餘代碼的。你應該儘量避免它。

來源

2016-07-15 14:07:27

將以下內容添加到css中： '.third button { position：absolute; bottom：0; ' }' '。第四個按鈕{ position：absolute; bottom：0; right：0;}' –

Thanx很多，這就是我想要的。這就是我保持按鈕固定在div中，這樣如果有人在div裏面滾動固定在頂部的按鈕remians。我嘗試使用位置：固定，但按鈕變得固定尊重頁面不是那個div –

嗯，這個我不確定。但你可以嘗試[this]（http://stackoverflow.com/questions/7846161/fixed-positioned-div-within-a-relative-parent-div） –

如果將按鈕浮動到右側，並且右側邊緣離開查看區域，那麼您可以預期該按鈕將隨之一起移動。

避免這種情況的一種方法是：相對於左側或右側的位置，然後在jQuery中添加相應的偏移距離以將按鈕保持在所需位置。

不要只使用jQuery來改變窗口。也可以用它將按鈕放在需要的位置。

另一種方法是將按鈕定位不是浮動右側，而是將左側邊緣定位爲一個離散量。

來源

2016-07-15 14:23:07 gladiola

如何啓動CSS過渡從左

回答

相關問題