animation: déplacer un élément d'une position à une autre

Question

J'essaie de faire un bel effet visuel afin que l'utilisateur puisse voir qu'un élément a été ajouté à la liste d'attente.

Déplacé des beaux effets Apple OS dans plusieurs applications comme iMovie lorsque vous échangez la bibliothèque avec l'historique vidéo, j'essaye de faire un mouvement simple à partir d'un élément div ... mais cela s'est avéré être un peu difficile .

Question sera, quelqu'un sait-il une bibliothèque pour faire la même chose d'une manière plus simple/plus agréable?

Ce que je pourrais accomplir en 5 minutes était le suivant:

http://jsbin.com/efihax

lien modifier: http://jsbin.com/efihax/edit

Mon idée est si rétrécir en douceur la .hero-unit div et faire comme il a été ajouté au Liste d'attente

après ces 5 premières minutes je pouvais voir que ce serait bien si je commençais à coder un animate appels sans fin ... pas une bonne pratique.

est-il un autre moyen? pensée sur CCS3 transitions/animations mais je ne suis pas familiarisé avec et ne savent toujours pas comment je pourrais le faire ...

Une image pour montrer ce que je suis en train d'accomplir avec le animate

Answer 1

Quelques problèmes avec votre code:

• Le rappel fadeOut sera appelé une fois pour chaque élément qui est masqué. Votre code peut s'exécuter plus facilement si vous avez supprimé le rappel et à la place, définissez un délai d'attente pour commencer à exécuter le reste du code une seule fois, lorsque l'animation est programmée pour se terminer. Lorsque vous démarrez votre animation, vous avez défini position: absolute, mais votre taille et votre position de l'élément sont toujours dérivées de sa position DOM, de sorte qu'il sautera lorsque vous commencerez à animer ces propriétés.

  Dans le délai d'attente, essayez de définir les propriétés de départ:

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

• Votre élément apparaît actuellement en dessous du .waitList .label en raison de son margin, et il semble plus grand que 1x1 px en raison de son padding. Essayez d'animer ceux-ci aussi.

My edit of your code

Mise à jour

Je réalise que les styles composites ne sont pas animés très bien. Pour obtenir une transition en douceur, vous devez animer margin-top et margin-bottom individuellement, plutôt que seulement margin, et la même chose avec les quatre propriétés .

My updated code

Answer 2

Le problème est que vous n'animez pas le conteneur. Juste en changeant l'élément animé en "conteneur", l'élément s'est complètement estompé. Travaillez-y pendant un moment et cela fonctionnera.