Peut-on utiliser ngAnimate sans définir de classes CSS3 ou de JavaScript ?

Question

Est-il possible d'utiliser ngAnimate sans aucune CSS3 ou JavaScript ? Disons que si vous avez simplement besoin de faire basculer l'opacité, pouvez-vous le faire simplement dans les balises ?

<div ng-show='foo == 'yes'' ng-animate="show: 'opacity:1', hide: 'opacity:0'" >
</div>

Answer 1

L'animation dans le navigateur doit se faire soit (1) en laissant le moteur de rendu du navigateur s'en charger via CSS, soit (2) en la contrôlant vous-même avec JavaScript. Donc, quelque part, l'une de ces deux choses doit se produire.

Cela dit, vous pouvez construire votre propre directive qui construit le CSS et/ou JavaScript correct à la volée et l'attache/applique à l'élément donné, mais je pense que l'utilisation de ngAnimate comme prévu est probablement plus facile.

Un exemple pour ceux qui arrivent dans ngAnimate pour la première fois :

HTML :

<div ng-show="foo == 'yes'" ng-animate="{show: 'fade'}"></div>

CSS :

.enter-fade {
  -webkit-transition: 1s linear opacity;
  -moz-transition: 1s linear opacity;
  -o-transition: 1s linear opacity;
  transition: 1s linear opacity;

  opacity: 0;
}

.enter-fade.enter-fade-active {
  opacity: 1;
}

Ou, si vous prenez en charge des navigateurs qui ne supportent pas les transitions CSS3, vous pouvez effectuer la transition avec JavaScript à la place :

myModule.animation('fade', function() {
  return { 
    setup : function(element) {
      element.css({'opacity': 0}); 
    },
    start : function(element, done, memo) {
      element.animate({'opacity': 1}, function() {
        done(); 
      });
    }
  };
});

Vous trouverez de plus amples informations dans ces excellents articles de Yearofmoo :

• Animation dans AngularJS
• Animation améliorée dans AngularJS