Tutoriel JavaScript : Animation, la technique FLIP

Dans cette vidéo je vous propose de découvrir la technique d'animation FLIP. Cette technique permet d'animer simplement les changements de position complexes de vos éléments HTML.

FLIP ?

Comment la technique FLIP propose de solutionner le problème ? Le secret se cache dans l'acronyme :

• First : On commence par mémoriser la position des éléments dans la page.
• Last : On applique les changements souhaités au DOM et on recalcule les nouvelles positions des éléments.
• Inverse : On applique des transformations sur l'ensemble de nos éléments pour les placer à la position initiale (et ainsi donner l'impression à l'utilisateur que rien n'a bougé).
• Play : On anime l'élément en retirant la transformation afin que l'élément prenne sa position finale.

Fonctionnement

Le fonctionnement de cette méthode est extrêmement simple et ne demande que peu de modifications du code.

/**
 * Déplace une todo dans une nouvelle liste
 * 
 * @param {HTMLElement} todo - Element à déplacer
 * @param {HTMLElement} list - Element de destination
 * @param {HTMLElement[]} todos - Liste des éléments
 */
function move(todo, list, todos) {
  // FIRST, on mémorise la position des éléments
  Flip.read(todos)
  // On modifie le DOM
  list.appendChild(todo)
  // On FLIP ! 
  Flip.play(todos)
}