angulaire.js - Concernant l'exécution d'une animation js en angulaire, un débutant aimerait demander conseil.

Question

Je viens d'entrer en contact avec l'animate d'Angular. J'ai moi-même écrit un anime et je l'ai essayé. Quelque chose s'est mal passé. Commençons par le code.

var animate = angular.module('phoneAnimations', []);
animate.animation('.phoness', function() {    //这个是给ngview用的
    return {
        enter: function(element, done) {
            element.css({
                opacity: 0.5,
                position: "relative",
                top: '100px',
                left: '200px'
            }).animate({
                top: 0,
                left: 0,
                opacity: 1
            }, 1000, done)
        }
    }
})


animate.animation('.repeat-animation', function () {    //这个是给那个repeat用的
  return {
    enter : function(element, done) {
      console.log("entering...");
      var width = element.width();
      element.css({
        position: 'relative',
        left: '-100px',
        opacity: 0
      });
      element.animate({
        left: 0,
        opacity: 1
      }, done);
    },
    leave : function(element, done) {
      element.css({
        position: 'relative',
        left: 0,
        opacity: 1
      });
      element.animate({
        left: '-100px',
        opacity: 0
      }, done);
    },
    move : function(element, done) {
      element.css({
        left: "50px",
        opacity: 0.5
      });
      element.animate({
        left: "0px",
        opacity: 1
      }, done);
    }
  }
});

Le code est comme ci-dessus. Le problème est : l'animation de ngview peut être implémentée, mais la répétition n'est pas valide, et elle est également invalide lors du changement et du filtrage. Ce n'est qu'en déconnectant la première animation, qui est ngview, que vous pouvez le faire. l'animation apparaît normalement, pourquoi ?

Une autre question est la suivante : lors de l'utilisation de l'animation CSS d'Angular, les animations de ngview et ngrepeat sont également définies, mais seule l'animation de ngview sera exécutée lorsqu'elle est actualisée. Existe-t-il un moyen de contrôler laquelle est exécutée en premier. ? Ou laisser l'animation ngrepeat être exécutée lors de l'actualisation ?
Deux questions, débutants merci de m'envoyer une lettre de garantie.

Il y a aussi un paragraphe sur l'animation dans le code source officiel du boîtier phone-cat. Je n'ai pas besoin de le comprendre, puis de le coder

.

angular.
  module('phonecatApp').
  animation('.phone', function phoneAnimationFactory() {
    return {
      addClass: animateIn,
      removeClass: animateOut
    };

    function animateIn(element, className, done) {
      if (className !== 'selected') return;

      element.css({
        display: 'block',
        position: 'absolute',
        top: 500,
        left: 0
      }).animate({
        top: 0
      }, done);

      return function animateInEnd(wasCanceled) {
        if (wasCanceled) element.stop();
      };
    }

    function animateOut(element, className, done) {
      if (className !== 'selected') return;

      element.css({
        position: 'absolute',
        top: 0,
        left: 0
      }).animate({
        top: -500
      }, done);

      return function animateOutEnd(wasCanceled) {
        if (wasCanceled) element.stop();
      };
    }
  });

Le HTML ressemble à ceci

<p class="phone-images">
  <img ng-src="{{img}}" class="phone"
      ng-class="{selected: img === $ctrl.mainImageUrl}"
      ng-repeat="img in $ctrl.phone.images" />
</p>

Je ne comprends pas très bien comment déterminer s'il faut ajouter ou supprimer un nom de classe ? Est-il possible de commencer par return{addclass et removeClass ? N'est-ce pas un nom d'attribut personnalisé ? >

Answer 1

Pourquoi personne ne répond ? Où est le grand dieu ? Mon cœur est si fatigué