полные обратный вызов в AngularJS анимации

Question

У меня есть AngularJS анимация ...

app.animation('slide-show', function() { 
    return { 
     setup: function (element) { 
     }, 
     start: function (element, done) { 
      element.slideDown(400, done); 
     } 
    }; 
}); 

app.animation('slide-hide', function() { 
    return { 
     setup: function (element) { 
     }, 
     start: function (element, done) { 
      element.slideUp(400, done); 
     } 
    }; 
}); 

Я хотел бы иметь возможность поставить дополнительный «полный» обратный вызов в качестве параметра к start() методам, так что он может быть вызван/передается методам jQuery. Возможно ли это с помощью анимационных директив?

Answer 1

Я только что этот вопрос, и это было, как я добился успеха:

Я имел такую ​​же установку для анимации, но затем я добавил свойство ng-animated на элемент HTML, который я анимировал, затем добавил следующее:

app.animation('slide-show', function() { 
    return { 
     setup: function (element) { 
     }, 
     start: function (element, done) { 
      element.slideDown(400, function(){ 
       var el = angular.element(element[0]); 
       el.scope().$eval(el.attr('ng-animated')); 
       done(); 
      }); 
     } 
    }; 
}); 

app.animation('slide-hide', function() { 
    return { 
     setup: function (element) { 
     }, 
     start: function (element, done) { 
      element.slideUp(400, function(){ 
       var el = angular.element(element[0]); 
       el.scope().$eval(el.attr('ng-animated')); 
       done(); 
      }); 
     } 
    }; 
}); 

Надеюсь, это поможет кому-то еще!

Answer 2

Вы уже прошли «полный» обратный вызов (второй параметр - element.slideUp()), однако вы не используете свой собственный, но вы просто вызываете функцию done Угловые.

Вы должны называть эту функцию в конце концов, но ничто не мешает вам выполнять свою работу заранее.

app.animation('slide-hide', function() { 
    return { 
     setup: function (element) { 
     }, 
     start: function (element, done) { 
      element.slideUp(400, function() { 
       // handle the end of the slideUp animation 
       // ... 

       // inform Angular that you're done 
       done(); 
      }); 
     } 
    }; 
}); 

---

Вы могли бы обобщить это, если вы хотите:

function AnimationCallback(done, callback, callbackArgs) { 
    return function() { 
     if (typeof callback === "function") { 
      // 'this' will be the DOM element that just finished animating 
      callback.apply(this, callbackArgs); 
     } 
     done(); 
    } 
} 

и

app.animation('slide-hide', function() { 
    return { 
     setup: function (element) { 
     }, 
     start: function (element, done) { 
      element.slideUp(400, new AnimationCallback(done, yourCallback)); 
     } 
    }; 
}); 

где yourCallback является любая функция, которую вы определили и callbackArgs необязательный массив аргументов что вы хотели бы перейти к нему.

Answer 3

app.animation('slide-show', function() { 
    return { 
     setup: function (element) { 
      var complete = function() { 
       /* Your implementation here */ 
      }; 

      return complete; 
     }, 
     start: function (element, done, complete) { 
      element.slideDown(400, done); 

      /* Invoke the function and do something */ 
      complete(); 
     } 
    }; 
}); 

Для получения более подробной информации вы можете хотите проверку этой статьи, а также:

http://gsklee.im/post/50254705713/nganimate-your-angularjs-apps-with-css3-and-jquery#javascript-defined-animations