Animation: moving an item from one position to another

Question

I am trying to make a nice visual effect so that the user can verify that the item has been added to the waiting list.

Moved from the beautiful effects of Apple OS in several applications such as iMovie, when you change the library with the history of the video, I try to make a simple movement from the div element ... but it turned out to be a little more complicated.

The question will be, does anyone know any library to make the same easier / better?

What I was able to complete in 5 minutes was as follows:

http://jsbin.com/efihax

link to link: http://jsbin.com/efihax/edit

My idea compresses the div .hero-unit so smoothly and makes it the same as it was added to the Waiting list

after these first 5 minutes, I could see that it animate out well if I start coding endless animate calls ... not a good practice.

Is there another way? Thoughts on CCS3 transitions / animations, but I am not familiar with it and still do not know how I could do this ...

Image to show what I'm trying to accomplish using animate

Answer 1

Some problems with your code:

• The fadeOut will be called once for each element that disappears. Your code can run more smoothly if you drop the callback and instead set a timeout to start the rest of the code only once when the animation time is over.

• When you start your animation, you set position: absolute , but your element size and position still comes from its DOM position, so it will jump when you start animating these properties.

  In the timeout, try setting the launch properties:

    orig .css({ 'position':'absolute', 'width':orig.width(), 'height':orig.height(), 'left':orig.position().left, 'top':orig.position().top }); orig.empty(); 

• Your item is currently displayed under .waitList .label due to its margin , and it looks larger than 1x1 px due to its padding . Try also to revive them.

My editing of your code

Update

I realized that composite styles are not very animating. To get a smooth transition, you need to animate the margin-top and margin-bottom individually, not just the margin , as well as all four padding properties.

My updated code

Answer 2

The problem is that you are not animating the container. By simply changing the animated element to “container”, the element completely disappeared. Work with him for a while and it will work.