Question

所以我尝试做的是： <
我有3列中的一些项目和默认定位（position:static）。
我正在尝试过渡他们到页面的top:0; left:0。

CSS3中不可能在不同位置（absolute和static）之间进行转换，所以我尝试了一个jQuery解决方法：

$(".item").each(function(){
  var items = $(this);
  $(this).css({
      'width': items.width(),
      'height': items.height(),
      'position': 'absolute',
      'top': items.offset().top,
      'left': items.offset().left
  });
});

这应该做的是将每个项目都带上课程item和＆＃34;重复＆＃34;它位于position:absolute的现有位置。这对于一个项目非常有效。但是一旦我得到多个项目，它只是将它们堆叠在第一个项目的位置......

这是一个小提琴：

＆＃13;

$(".item").each(function(){
  var items = $(this);
  $(this).css({
      'width': items.width(),
      'height': items.height(),
      'position': 'absolute',
      'top': items.offset().top,
      'left': items.offset().left
  });
});

＆＃13;

#items{
    -webkit-column-count: 3;
    -webkit-column-gap: 10px;
    -moz-column-count: 3;
    -moz-column-gap: 10px;
    column-count: 3;
    column-gap: 10px;
}
.item{
    width:100%;
    height:20px;
    text-align:center;
    overflow:hidden;
    margin:0 0 10px 0;
    border:1px solid black;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="items">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
    <div class="item">4</div>
    <div class="item">4</div>
</div>

＆＃13;

我想要的结果是jQuery获取每个项目，在页面上获取其位置，并替换CSS，因此它与之前的位置相同，只有position:absolute，所以我可以转换之后再到top:0;left:0;。

Answer 1

如果您使用absolute，它将始终保持相同的位置！因为你循环每个项目然后立即应用它，所以将第一个div更改为absolute并将其保留为top,left值的旧位置。然后第二个div仍然不会更改为绝对值，因此它也将{{1使用第一个div来定位和复制。这将继续发生直到循环结束。所以它们都具有相同的first div值。

所以我的解决方案不是立即应用css属性，将值存储在一个帮助器对象中，并在完成循环后应用所有属性。

top,left

var beforeApply = {}
$(".item").each(function(){
  var items = $(this);
  beforeApply[$(this).index()] = {
      'width': items.width(),
      'height': items.height(),
      'position':'absolute',
      'top': items.offset().top,
      'left': items.offset().left,
      'text':items.text()
  };
});

for(var j in beforeApply) {
     var index = parseInt(j) + 1;
     var text = beforeApply[j].text;
    $("#items div:nth-child("+index+")").css(beforeApply[j]).text(text + "Changed position");
}

#items{
    -webkit-column-count: 3;
    -webkit-column-gap: 10px;
    -moz-column-count: 3;
    -moz-column-gap: 10px;
    column-count: 3;
    column-gap: 10px;
}
.item{
    width:100%;
    height:20px;
    text-align:center;
    overflow:hidden;
    margin:0 0 10px 0;
    border:1px solid black;
}

Answer 2

这“在CSS3中不可能在不同位置（绝对和静态）之间进行转换，所以我尝试了一个jQuery解决方法：”可以通过默认使用静态，然后附加具有绝对值的类来解决。然后CSS属性“transition”将起作用。

在这里摆弄https://jsfiddle.net/nikoimp/vL9bahra/



$("#1").addClass('1');
$("#2").addClass('2');
$("#3").addClass('3');
$("#4").addClass('4');
$("#5").addClass('5');
    #items{
        -webkit-column-count: 3;
        -webkit-column-gap: 10px;
        -moz-column-count: 3;
        -moz-column-gap: 10px;
        column-count: 3;
        column-gap: 10px;
    }
    .item{
        -webkit-transition: width 2s;
        transition: width 2s;
        width:100%;
        height:20px;
        text-align:center;
        overflow:hidden;
        margin:0 0 10px 0;
        border:1px solid black;
    }
    .1 {
        position: absolute;
        background: red;
    }
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

    <div id="items">
      <div class="item" id="1">1</div>
      <div class="item" id="2">2</div>
      <div class="item" id="3">3</div>
      <div class="item" id="4">4</div>
   <div class="item" id="5">4</div>
    </div>

Answer 3

我能找到的最佳解决方案是将新内容附加到另一个隐藏的div中，然后删除旧的div，并显示新的div。

您遇到了这个问题，因为在将divs更新为绝对位置时，其他divs样式也会同时更新，因为它们是浮动的。

$(function() {
  $(".item").each(function(){
    var items = $(this);

    var _text = items.text() ;
    var _css = "width:" + items.width() + "px" + 
        "; height:" + items.height() + "px" + 
        "; position:absolute" +
        "; top:" + items.offset().top + "px" + 
        "; left:" + items.offset().left + "px" + ";"
    var _style = "style='" + _css + "'" ;

    var _div = "<div class='item' " + _style + ">" + _text + "</div>" ;

    $("#items_clone").append(_div) ;
  });
  
  $("#items").remove() ;
  $("#items_clone").show().attr("id", "items") ;
}) ;

#items{
    -webkit-column-count: 3;
    -webkit-column-gap: 10px;
    -moz-column-count: 3;
    -moz-column-gap: 10px;
    column-count: 3;
    column-gap: 10px;
}
#items_clone{
  display:none;
}
.item{
    width:100%;
    height:20px;
    text-align:center;
    overflow:hidden;
    margin:0 0 10px 0;
    border:1px solid black;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="items">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
    <div class="item">4</div>
    <div class="item">5</div>
</div>
<div id="items_clone">

</div>

每个功能都没有按预期工作

3 个答案: