angular.js - 關於angular的js動畫執行問題，菜鳥求教。

Question

剛接觸angular的animate，自己寫了個animate試了試，出了點問題，先上代碼..

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

程式碼如上，出現的問題是：ngview的動畫可以實現，但是那個repeat的就無效，切換、篩選的時候也無效，只有把第一個動畫，也就是ngview的註銷掉就可以正常出現動畫，這個是為什麼？

還有一個問題是：使用angular的css動畫的時候，也是設定了ngview和ngrepeat的動畫，但是剛刷新的時候卻只有ngview的動畫會執行，有沒有辦法控制哪個先執行？ 或是讓刷新的時候執行ngrepeat的動畫呢？
兩個問題，初學者請多多保函。

還有個官方phone-cat案例源碼中一段關於動畫的，不打理解，接著上碼

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是這樣的

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

我不太理解這是怎麼判斷是增加還是移除類別名稱的？ 難道開始的return{addclass 和 removeClass這樣就可以？這不是自訂的屬性名？ }

Answer 1

怎麼沒人回答啊，大神哪去了？心好累