AngularJS Анимации с JavaScript

Question

Смотреть это JSFiddle: http://jsfiddle.net/5mUsH/3/

Я пытаюсь сделать очень простую анимацию JavaScript в AngularJS и JQuery. (Я не использую анимацию CSS, потому что я хочу поддерживать старые браузеры, а также выполнять более сложные анимации.) Код в скрипке приведен в руководстве пользователя AngularJS (но немного упрощен): http://docs.angularjs.org/guide/animations

Но это не так. работа! DOM обновляется немедленно (без анимации). Есть идеи? Благодаря!

Вот соответствующая разметка из JSFiddle:

<div class="sample" ng-show="checked"> 
    Visible... 
</div> 

И JavaScript:

angular.module('App', ['ngAnimate']).animation('.sample', function() { 
    return { 
     enter : function(element, done) { 
      element.css('opacity',0); 
      jQuery(element).animate({ 
       opacity: 1 
      }, done); 

      // optional onDone or onCancel callback 
      // function to handle any post-animation 
      // cleanup operations 
      return function(isCancelled) { 
       if(isCancelled) { 
        jQuery(element).stop(); 
       } 
      } 
     }, 
     leave : function(element, done) { 
      element.css('opacity', 1); 
      jQuery(element).animate({ 
       opacity: 0 
      }, done); 

      // optional onDone or onCancel callback 
      // function to handle any post-animation 
      // cleanup operations 
      return function(isCancelled) { 
       if(isCancelled) { 
        jQuery(element).stop(); 
       } 
      } 
     }, 
    } 
}); 

Answer 1

Я подошел к ней в несколько иначе, как ng-show был перекрывая анимации. Так как вы хотите использовать JQuery:

http://jsfiddle.net/wiredprairie/5tFCZ/1/

angular.module('App', ['ngAnimate']).animation('.sample', function() { 
    return { 
     addClass: function (element, className, done) { 
      if (className === 'hidden') { 
       jQuery(element) 
        .css({ 
        opacity: 1 
       }) 
        .animate({ 
        opacity: 0 
       }, 500, done); 
      } else { 
       done(); 
      } 
     }, 
     removeClass: function (element, className, done) { 
      if (className === 'hidden') { 
       jQuery(element) 
        .css({ 
        opacity: 0 
       }) 
        .animate({ 
        opacity: 1 
       }, 500, done); 
      } else { 
       done(); 
      } 
     } 
    } 
}); 

В принципе, класс hidden CSS переключается, то соответствующий код анимации выполняется.