CODEWITHSUNDEEP
javascriptcsscss-floatcss-animations
Mark
Mark

Reputation: 6947

Animate repositioning of left floating DIVs as content size changes

I have a number of left floating, fixed width DIVs. When the window size increases and more DIVs fit on a row, the DIVs are instantly repositioned.

I'd like to know if there's a way to animate the repositioning so that it's easier for the user to follow a certain box to see to where it moves to - preferably CSS only.

.box {
  float:left;
  width: 200px;
  min-height:200px;
  background:red;
  margin:20px;
}

<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>

A WebKit-only solution would be fine at the moment (it's a native app with a WebView embedded). I tried -webkit-transition:all 2s which had no effect...

EDIT:

Would maybe the CSS3 flexible box layout allow animated transitions of the DIV positions?

Upvotes: 2

Views: 867

Answers (2)

Sean
Sean

Reputation: 6499

Something like masonry (http://masonry.desandro.com/) might be a good option for you here, I know it's not pure CSS but it'll work cross browser, and it's not going impact the page speed too much.

You can find out more via the link above, but at its simplest you only really need the below JS:

var container = document.querySelector('#container');
var msnry = new Masonry( container, {
  // options
  columnWidth: 200,
  itemSelector: '.item'
});

(you obviously need to include the script somewhere on the page and some basic CSS styling too)

As far as I can tell, CSS transitions will only work if your elements are positioned as opposed to floated, this might be a possible solution for you but I can see this getting very messy very quickly if you're wanting them to re layout for smaller window sizes. Although I would be pleasantly surprised if there was a way of doing this with pure CSS!

Upvotes: 2

slash197
slash197

Reputation: 9034

CSS only

.box { transition: top 0.5s linear, left 0.5s linear }

This will work if your elements are positioned rather than simply floated.

Upvotes: 0

Related Questions