The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums JavaScript add-remove items and css3 animation

  • This topic is empty.
Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
  • #43032

    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]( “”). The same when, but least important when you add an item as you can see [here]( 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]( “”) 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.


    @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]( “”), 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 2 posts - 1 through 2 (of 2 total)
  • The forum ‘JavaScript’ is closed to new topics and replies.