타사 자바 스크립트 라이브러리가있는 사용자 정의 AngularJS 애니메이션

Question

AngularJS $ animate를 사용하여 velocity.js을 기반으로 애니메이션을 만들려고 시도하는 동안 해결책이 매우 간단했지만 몇 시간 동안은 알 수없는 작은 문제가 발생했습니다. 다음 코드를 고려

: 당신 같은 어려움을 피하기 위해, 나는 당신에게 내 솔루션을 제시

app.directive("animate", function ($animate, $timeout) { 
    return function (scope, element, attrs) { 
     element.on('click', function() { 
      // to fire $animate, need to wrap it into a $timeout wrapper. 
      $timeout(function() { 
       $animate.addClass(element, 'test').then(function() { 
        $timeout(function() { 
         $animate.removeClass(element, 'test'); 
        }, 0); 
       }); 
      }, attrs.delay || 0); 
     }); 
    }; 
}); 

Answer 1

$의 애니메이션은 official documentation에 따라, 약속을 반환합니다. 그러나 사용자 지정 애니메이션이 실제로 완료되면이 약속을 발사, 당신은 다음과 같이 세 번째 인수로 제공되는 done() 기능을 사용해야합니다

app.animation('.test', function() { 
    var fn = function (element, className, done) { 
     var effect = { 
      css: { 
       translateX:'+=500' 
      }, 
      options: { 
       easing: 'linear', 
       duration: 2000, 
       complete: function() {done();} 
      } 
     }; 

     element.velocity(effect.css, effect.options); 
    }; 

    return { 
     addClass: fn, 
     removeClass: function() {console.log('removed';} 
    }; 
}); 

약간의 트릭, 그래서하지만,이 프로토 타입은 모든 문서 및 튜토리얼에서 누락 된 나는 지금부터 발견했다. Angular를 사용하여 타사 라이브러리 애니메이션을 즐기십시오.