如何从左侧开始css过渡答案

【问题标题】：how to start css transition from left如何从左侧开始css过渡
【发布时间】：2016-07-15 12:36:55
【问题描述】：

我有四个 div，我已经应用了 javascript 过渡属性来增加按钮单击时的宽度和高度，但我需要增加同一屏幕中的高度和宽度

我想点击按钮，这些 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>

【问题讨论】：

标签： javascript html css

【解决方案1】：

我不太确定你想要什么，但这是我想出的：

<!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'
        });
    }
}

我将它们全部放在一个函数中，因为良好的编程习惯反对冗余代码。你应该尽量避免它。

【讨论】：

在css中添加以下内容：'.third button { position: absolute;底部：0； }' '.第四个按钮 { 位置：绝对；底部：0；右：0； }'
非常感谢，这正是我想要的。我可以将按钮固定在 div 中，这样如果有人在 div 内滚动，按钮就会固定在顶部。我尝试使用 position:fixed 但按钮相对于不是那个 div 的页面变得固定
嗯，这个我不确定。不过你可以试试this

【解决方案2】：

如果您将按钮浮动到右侧，并且右边缘超出了查看区域，那么您可以期望按钮随之移动。

避免这种情况的一种方法：相对于左侧或右侧的位置，然后在 jQuery 中添加相应的偏移距离，以使您的按钮保持在所需的位置。

不要只使用 jQuery 来改变窗口。也可以用它把按钮放在需要去的地方。

另一种方法是将按钮定位不是在浮动右侧，而是在左侧边缘上以离散量定位。

【讨论】：