Outils pour utilisateurs

Outils du site


cours2011:bases_de_la_programmation_orientee_objets_et_evenementielle:animation_css_a_base_de_keyframes

Animation CSS à base de "keyframes"

  • Animations complexes (plusieurs étapes) en utilisant la déclaration CSS @keyframes.

Exemple d'usage : Animate.css

Le but est d'obtenir : voir vidéo.

Travail

Animation CSS (keyframes)

Partir du TP : Fenêtre modale

  • Supprimer le code existant qui ajoute/supprime le bouton de fermeture.
    • Le remplacer par le code qui l'ajoute à tous dés le chargement de la page :
// ajoute à tous les slides le bouton
$('#slider>div').append("<div class='close'>X</div>");
  • Télécharger et lier à votre page une version contenant les animations désirées : http://daneden.me/animate/build/
    • La suite du TP utilise flipInY et flipOutY (utilisez un autre effet si votre navigateur ne le supporte pas)
  • Pour montrer un slide :
    • Ajouter les classes “animated visible”.
    • Retirer la classe flipOutY, ajouter la classe flipInY
  • Pour cacher un slide :
    • Retirer la classe flipInY, ajouter la classe flipOutY

Interaction avec JavaScript

Interaction avec JavaScript en utilisant l'événement animationEnd (et il existe le même pour les transitions.

Le problème est que ce n'est pas encore normalisé et que le nom de l'événement varie suivant les navigateurs !

Ajouter le code suivant au moment ou vous ajouter l'animation :

  // variable à placer en début de script
  var ANIMATIONEND = "webkitAnimationEnd msAnimationEnd oAnimationEnd animationend";
 
  // code qui écoute l'événement (sur tout navigateur)
  $('.slider>.visible').on(ANIMATIONEND,function () {
      console.log("fin animation !");
      // retire le(s) gestionnaire d'événement.
      $('.slider>.visible').off(ANIMATIONEND);
  });

Exercice : Essayer d'enchaîner plusieurs animations.

cours2011/bases_de_la_programmation_orientee_objets_et_evenementielle/animation_css_a_base_de_keyframes.txt · Dernière modification: 2012/05/19 22:00 (modification externe)