angular.js - Regarding the execution of js animation in angular, a newbie would like to ask for advice.

Question

I just came into contact with Angular’s ​​animate. I wrote an animate myself and tried it. Something went wrong. Let’s start with the 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);
    }
  }
});

The code is as above. The problem is: the animation of ngview can be implemented, but the repeat is invalid, and it is also invalid when switching and filtering. Only by logging out the first animation, which is ngview, can the animation appear normally. , why is this?

Another question is: When using Angular’s ​​CSS animation, the animations of ngview and ngrepeat are also set, but only the animation of ngview will be executed when it is refreshed. Is there any way to control which one is executed first? Or let the ngrepeat animation be executed when refreshing?
Two questions, beginners please send me a letter of guarantee.

There is also a paragraph about animation in the official phone-cat case source code. I don’t need to understand it, then code it

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();
      };
    }
  });

HTML looks like this

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

I don’t quite understand how to determine whether to add or remove a class name? Is it possible to start with return{addclass and removeClass? Isn't this a custom attribute name? }

Answer 1

Why no one answered? Where has the great god gone? My heart is so tired