CODEWITHSUNDEEP
htmlcsscss-transitions
Mahdi Ghiasi
Mahdi Ghiasi

Reputation: 15301

Animate position of items in CSS3 Column layout

I've created a CSS column layout with some rectangle divs inside. This is my code.

When user clicks on each of them, it should remove. I've added CSS3 transition to it:

-webkit-transition: all 0.3s ease-in; /*Safari & Chrome*/
-moz-transition: all 0.3s ease-in; /* Firefox 4 */
-o-transition: all 0.3s ease-in; /* Opera */
transition: all 0.3s ease-in;

now the item which is clicked removes with effect, but other rectangles (after this div) changing their places without any effect.

How to add effect to other items when they are changing places? Is it possible with CSS3 Columns? If not, Which method should I prefer? How?

Note: I'm going to create something like Windows 8 Start menu; when you remove a tile inside it, other items will move to their new position with animation.

Upvotes: 2

Views: 1937

Answers (2)

skyline3000
skyline3000

Reputation: 7913

I made the divs display: block and gave them float: left, is this the effect you are looking for? http://jsfiddle.net/AQ7bp/22/

Upvotes: 3

tobspr
tobspr

Reputation: 8376

I would surround each of your box with a container, with 

{
overflow: hidden
max-height: 999px
display: inline-block
}

And animate this container to max-height: 0 when removing a box. You could get the surrounding box with "parent". Then you let your box beeing animated:

surrounding-container {
transition: all 0.2s linear;
[..]
}

This will get the effect.

Edit: Here's the fiddle: http://jsfiddle.net/sTBjn/

Upvotes: 1

Related Questions