每个功能均无法正常工作

Question

So what I try to do is the following:

I got some items in 3 columns and default positioning ( position:static ).
And I'm trying to transition them to top:0; left:0 top:0; left:0 of the page.

---

Transitions between different positions ( absolute and static ) are not possible in CSS3, so I tried a jQuery workaround:

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

What this is supposed to do, is to take every item with class item and "duplicate" it at the exisiting position with position:absolute
This is working perfectly for one item. But as soon as I got multiple items, it simply stacks them at the position of the first item...

---

Here's a fiddle:

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

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

 <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> 

My desired result is that jQuery takes every item, gets its position on the page, and replaces the CSS, so it's at the same position as before, just with position:absolute , so I can transition it to top:0;left:0; afterwards.

Answer 1

It will always the same position if you use absolute ! Because you loop each item then apply it immediately so first div is changed to absolute and take it old position with top,left value .Then second div is not still change as absolute so it will also take first div position and duplicate with first div .This will continuing happen till loop end . So it all will have the same top,left value .

So my solution is not to apply css property immediately , store value in one helper object and applied that all property after finished loop .

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

 <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> 

Answer 2

This "Transitions between different positions (absolute and static) are not possible in CSS3, so I tried a jQuery workaround:" can be worked around by having static by default, and then appending a class that has absolute. Then the CSS attribute "transition" will work.

fiddle here 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

The best solution I was able to find is to append the new content in another hidden div, then remove the old div, and show the new one.

You was facing that problem, because while updating the divs to position absolute, the other divs styling was also being updated at the same time because they are floating.

 $(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>