feat($animate): introduce the $animate.animate() method

This commit is contained in:
Matias Niemelä
2014-10-10 21:46:42 -04:00
committed by Igor Minar
parent e5f4d7b10a
commit 02be700bda
5 changed files with 116 additions and 6 deletions

View File

@@ -50,6 +50,15 @@ describe("$animate", function() {
expect(element.text()).toBe('21');
}));
it("should apply styles instantly to the element",
inject(function($animate, $compile, $rootScope) {
$animate.animate(element, { color: 'rgb(0, 0, 0)' });
expect(element.css('color')).toBe('rgb(0, 0, 0)');
$animate.animate(element, { color: 'rgb(255, 0, 0)' }, { color: 'rgb(0, 255, 0)' });
expect(element.css('color')).toBe('rgb(0, 255, 0)');
}));
it("should still perform DOM operations even if animations are disabled (post-digest)", inject(function($animate, $rootScope) {
$animate.enabled(false);

View File

@@ -329,7 +329,7 @@ describe("ngAnimate", function() {
return function($animate, $compile, $rootScope, $rootElement) {
element = $compile('<div></div>')($rootScope);
forEach(['.ng-hide-add', '.ng-hide-remove', '.ng-enter', '.ng-leave', '.ng-move'], function(selector) {
forEach(['.ng-hide-add', '.ng-hide-remove', '.ng-enter', '.ng-leave', '.ng-move', '.my-inline-animation'], function(selector) {
ss.addRule(selector, '-webkit-transition:1s linear all;' +
'transition:1s linear all;');
});
@@ -454,6 +454,20 @@ describe("ngAnimate", function() {
expect(element.text()).toBe('21');
}));
it("should perform the animate event",
inject(function($animate, $compile, $rootScope, $timeout, $sniffer) {
$rootScope.$digest();
$animate.animate(element, { color: 'rgb(255, 0, 0)' }, { color: 'rgb(0, 0, 255)' }, 'animated');
$rootScope.$digest();
if($sniffer.transitions) {
expect(element.css('color')).toBe('rgb(255, 0, 0)');
$animate.triggerReflow();
}
expect(element.css('color')).toBe('rgb(0, 0, 255)');
}));
it("should animate the show animation event",
inject(function($animate, $rootScope, $sniffer) {
@@ -653,6 +667,16 @@ describe("ngAnimate", function() {
expect(child.attr('class')).toContain('ng-hide-remove-active');
browserTrigger(child,'transitionend', { timeStamp: Date.now() + 1000, elapsedTime: 1 });
//animate
$animate.animate(child, null, null, 'my-inline-animation');
$rootScope.$digest();
$animate.triggerReflow();
expect(child.attr('class')).toContain('my-inline-animation');
expect(child.attr('class')).toContain('my-inline-animation-active');
browserTrigger(child,'transitionend', { timeStamp: Date.now() + 1000, elapsedTime: 1 });
$animate.triggerCallbackPromise();
//leave
$animate.leave(child);
$rootScope.$digest();