Skip to content
This repository has been archived by the owner on Apr 12, 2024. It is now read-only.

Commit

Permalink
feat($animator): provide support for custom animation events
Browse files Browse the repository at this point in the history
  • Loading branch information
matsko authored and IgorMinar committed May 16, 2013
1 parent 24ed61c commit c53d4c9
Show file tree
Hide file tree
Showing 2 changed files with 84 additions and 0 deletions.
14 changes: 14 additions & 0 deletions src/ng/animator.js
Original file line number Diff line number Diff line change
Expand Up @@ -253,6 +253,20 @@ var $AnimatorProvider = function() {
* @param {jQuery/jqLite element} element the element that will be rendered visible or hidden
*/
animator.hide = animateActionFactory('hide', noop, hide);

/**
* @ngdoc function
* @name ng.animator#animate
* @methodOf ng.$animator
*
* @description
* Triggers a custom animation event to be executed on the given element
*
* @param {jQuery/jqLite element} element that will be animated
*/
animator.animate = function(event, element) {
animateActionFactory(event, noop, noop)(element);
}
return animator;

function animateActionFactory(type, beforeFn, afterFn) {
Expand Down
70 changes: 70 additions & 0 deletions test/ng/animatorSpec.js
Original file line number Diff line number Diff line change
Expand Up @@ -352,6 +352,18 @@ describe("$animator", function() {
expect(element.hasClass('animation-cancelled')).toBe(true);
}));


it("should properly animate custom animation events", inject(function($animator, $rootScope) {
$animator.enabled(true);
animator = $animator($rootScope, {
ngAnimate : '{custom: \'setup-memo\'}'
});

element.text('123');
animator.animate('custom',element);
window.setTimeout.expect(1).process();
expect(element.text()).toBe('memento');
}));
});

describe("with CSS3", function() {
Expand All @@ -368,6 +380,64 @@ describe("$animator", function() {
})
});

it("should properly animate custom animations for specific animation events",
inject(function($animator, $rootScope, $compile, $sniffer) {

$animator.enabled(true);
var element = $compile(html('<div></div>'))($rootScope);

animator = $animator($rootScope, {
ngAnimate : '{custom: \'special\'}'
});

animator.animate('custom',element);
if($sniffer.transitions) {
expect(element.hasClass('special')).toBe(true);
window.setTimeout.expect(1).process();
expect(element.hasClass('special-active')).toBe(true);
}
else {
expect(window.setTimeout.queue.length).toBe(0);
}
}));

it("should not animate custom animations if not specifically defined",
inject(function($animator, $rootScope, $compile) {

$animator.enabled(true);
var element = $compile(html('<div></div>'))($rootScope);

animator = $animator($rootScope, {
ngAnimate : '{custom: \'special\'}'
});

expect(window.setTimeout.queue.length).toBe(0);
animator.animate('custom1',element);
expect(element.hasClass('special')).toBe(false);
expect(window.setTimeout.queue.length).toBe(0);
}));

it("should properly animate custom animations for general animation events",
inject(function($animator, $rootScope, $compile, $sniffer) {

$animator.enabled(true);
var element = $compile(html('<div></div>'))($rootScope);

animator = $animator($rootScope, {
ngAnimate : "'special'"
});

animator.animate('custom',element);
if($sniffer.transitions) {
expect(element.hasClass('special-custom')).toBe(true);
window.setTimeout.expect(1).process();
expect(element.hasClass('special-custom-active')).toBe(true);
}
else {
expect(window.setTimeout.queue.length).toBe(0);
}
}));

describe("Animations", function() {
it("should properly detect and make use of CSS Animations",
inject(function($animator, $rootScope, $compile, $sniffer) {
Expand Down

0 comments on commit c53d4c9

Please sign in to comment.