Grow your CSS skills. Land your dream job.

add-remove items and css3 animation

  • # February 27, 2013 at 10:21 pm

    I am not sure how accurate the title is or if this discussion is css or javascript category. But what I want to do is when you remove an item from a container the gap is filled from the rest items, I want that to happen smoothly some css3 animation as have be done in isotope plugin [here](http://isotope.metafizzy.co/demos/removing.html “”). The same when, but least important when you add an item as you can see [here](http://isotope.metafizzy.co/demos/adding-important important important “”). Also look really nice on the sorting here but I guess the idea behind of all of them is the same. I have build a simple[ jsFiddle](http://jsfiddle.net/cparliaros/nB2zt/1/ “”) project where you can add and remove item, what missing is the animation. Any ideas?

    p.s. I dont want to use isotope plugin just for that.

    EDIT: looking the isotope code, they seems that they use translate css3 fuctionality but i cant simplify that part of their code.

    # February 28, 2013 at 3:57 am

    http://jsfiddle.net/nB2zt/2/

    This will run the sliding animation after the fading out animation, if you want them to run at the same time like isotope, it get’s more complex (overflowing content and stuff). When adding you just need a fadeIn, unless elements can be added anywhere in the grid.

    # February 28, 2013 at 10:15 am

    @CrocoDillon thanks for the reply, I actually found the same solution my self last night but is incomplete because only the items on the same row are slide the rest just jump to the next position. I think as you said there is no easy way to do that, I found a plugin, [quicksand](http://razorjack.net/quicksand/ “”), which does exactly that and as I was looking on the code I realized that you have to convert the relative position of items to absolute and then moving them by keeping track of old and new positions.

    p.s. I builded a nice live search for the iMDb, it looks nice but is not done yet. On the other post I will give a link later.

Viewing 3 posts - 1 through 3 (of 3 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".