mirror of
https://github.com/Hopiu/angular.js.git
synced 2026-05-23 21:35:47 +00:00
feat($animator): provide support for custom animation events
This commit is contained in:
parent
24ed61cf5c
commit
c53d4c9430
2 changed files with 84 additions and 0 deletions
|
|
@ -253,6 +253,20 @@ var $AnimatorProvider = function() {
|
||||||
* @param {jQuery/jqLite element} element the element that will be rendered visible or hidden
|
* @param {jQuery/jqLite element} element the element that will be rendered visible or hidden
|
||||||
*/
|
*/
|
||||||
animator.hide = animateActionFactory('hide', noop, hide);
|
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;
|
return animator;
|
||||||
|
|
||||||
function animateActionFactory(type, beforeFn, afterFn) {
|
function animateActionFactory(type, beforeFn, afterFn) {
|
||||||
|
|
|
||||||
|
|
@ -352,6 +352,18 @@ describe("$animator", function() {
|
||||||
expect(element.hasClass('animation-cancelled')).toBe(true);
|
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() {
|
describe("with CSS3", function() {
|
||||||
|
|
@ -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() {
|
describe("Animations", function() {
|
||||||
it("should properly detect and make use of CSS Animations",
|
it("should properly detect and make use of CSS Animations",
|
||||||
inject(function($animator, $rootScope, $compile, $sniffer) {
|
inject(function($animator, $rootScope, $compile, $sniffer) {
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue