mirror of
https://github.com/Hopiu/angular.js.git
synced 2026-04-13 11:21:15 +00:00
fix(ngAnimate): skip animation on first render
This commit is contained in:
Matias Niemelä
Misko Hevery
parent
5476cb6e9b
commit
1351ba2632
8 changed files with 241 additions and 60 deletions
|
|
@ -40,6 +40,10 @@
|
|||
*
|
||||
* The `event1` and `event2` attributes refer to the animation events specific to the directive that has been assigned.
|
||||
*
|
||||
* Keep in mind that, by default, **all** initial animations will be skipped until the first digest cycle has fully
|
||||
* passed. This helps prevent any unexpected animations from occurring while the application or directive is initializing. To
|
||||
* override this behavior, you may pass "animateFirst: true" into the ngAnimate attribute expression.
|
||||
*
|
||||
* <h2>CSS-defined Animations</h2>
|
||||
* By default, ngAnimate attaches two CSS3 classes per animation event to the DOM element to achieve the animation.
|
||||
* This is up to you, the developer, to ensure that the animations take place using cross-browser CSS3 transitions.
|
||||
|
|
@ -140,6 +144,30 @@ var $AnimatorProvider = function() {
|
|||
*/
|
||||
var AnimatorService = function(scope, attrs) {
|
||||
var ngAnimateAttr = attrs.ngAnimate;
|
||||
|
||||
// avoid running animations on start
|
||||
var animationEnabled = false;
|
||||
var ngAnimateValue = ngAnimateAttr && scope.$eval(ngAnimateAttr);
|
||||
|
||||
if (!animationEnabled) {
|
||||
if(isObject(ngAnimateValue) && ngAnimateValue['animateFirst']) {
|
||||
animationEnabled = true;
|
||||
} else {
|
||||
var enableSubsequent = function() {
|
||||
removeWatch();
|
||||
scope.$evalAsync(function() {
|
||||
animationEnabled = true;
|
||||
});
|
||||
};
|
||||
var removeWatch = noop;
|
||||
|
||||
if (scope.$$phase) {
|
||||
enableSubsequent();
|
||||
} else {
|
||||
removeWatch = scope.$watch(enableSubsequent);
|
||||
}
|
||||
}
|
||||
}
|
||||
var animator = {};
|
||||
|
||||
/**
|
||||
|
|
@ -214,7 +242,6 @@ var $AnimatorProvider = function() {
|
|||
return animator;
|
||||
|
||||
function animateActionFactory(type, beforeFn, afterFn) {
|
||||
var ngAnimateValue = ngAnimateAttr && scope.$eval(ngAnimateAttr);
|
||||
var className = ngAnimateAttr
|
||||
? isObject(ngAnimateValue) ? ngAnimateValue[type] : ngAnimateValue + '-' + type
|
||||
: '';
|
||||
|
|
@ -233,7 +260,8 @@ var $AnimatorProvider = function() {
|
|||
var startClass = className + '-start';
|
||||
|
||||
return function(element, parent, after) {
|
||||
if (!globalAnimationEnabled || !$sniffer.supportsTransitions && !polyfillSetup && !polyfillStart) {
|
||||
if (!animationEnabled || !globalAnimationEnabled ||
|
||||
(!$sniffer.supportsTransitions && !polyfillSetup && !polyfillStart)) {
|
||||
beforeFn(element, parent, after);
|
||||
afterFn(element, parent, after);
|
||||
return;
|
||||
|
|
@ -268,7 +296,6 @@ var $AnimatorProvider = function() {
|
|||
0,
|
||||
duration);
|
||||
});
|
||||
|
||||
$window.setTimeout(done, duration * 1000);
|
||||
} else {
|
||||
done();
|
||||
|
|
|
|||
4
src/ngMock/angular-mocks.js
vendored
4
src/ngMock/angular-mocks.js
vendored
|
|
@ -628,7 +628,9 @@ angular.mock.createMockWindow = function() {
|
|||
if (setTimeoutQueue.length > 0) {
|
||||
return {
|
||||
process: function() {
|
||||
setTimeoutQueue.shift().fn();
|
||||
var tick = setTimeoutQueue.shift();
|
||||
expect(tick.delay).toEqual(delay);
|
||||
tick.fn();
|
||||
}
|
||||
};
|
||||
} else {
|
||||
|
|
|
|||
|
|
@ -2,10 +2,21 @@
|
|||
|
||||
describe("$animator", function() {
|
||||
|
||||
var element;
|
||||
var body, element;
|
||||
|
||||
function html(html) {
|
||||
body.html(html);
|
||||
element = body.children().eq(0);
|
||||
return element;
|
||||
}
|
||||
|
||||
beforeEach(function() {
|
||||
// we need to run animation on attached elements;
|
||||
body = jqLite(document.body);
|
||||
});
|
||||
|
||||
afterEach(function(){
|
||||
dealoc(element);
|
||||
dealoc(body);
|
||||
});
|
||||
|
||||
describe("enable / disable", function() {
|
||||
|
|
@ -120,6 +131,7 @@ describe("$animator", function() {
|
|||
animator = $animator($rootScope, {
|
||||
ngAnimate : '{enter: \'custom\'}'
|
||||
});
|
||||
$rootScope.$digest(); // re-enable the animations;
|
||||
expect(element.contents().length).toBe(0);
|
||||
animator.enter(child, element);
|
||||
window.setTimeout.expect(1).process();
|
||||
|
|
@ -129,6 +141,7 @@ describe("$animator", function() {
|
|||
animator = $animator($rootScope, {
|
||||
ngAnimate : '{leave: \'custom\'}'
|
||||
});
|
||||
$rootScope.$digest();
|
||||
element.append(child);
|
||||
expect(element.contents().length).toBe(1);
|
||||
animator.leave(child, element);
|
||||
|
|
@ -140,6 +153,7 @@ describe("$animator", function() {
|
|||
animator = $animator($rootScope, {
|
||||
ngAnimate : '{move: \'custom\'}'
|
||||
});
|
||||
$rootScope.$digest();
|
||||
var child1 = $compile('<div>1</div>')($rootScope);
|
||||
var child2 = $compile('<div>2</div>')($rootScope);
|
||||
element.append(child1);
|
||||
|
|
@ -154,6 +168,7 @@ describe("$animator", function() {
|
|||
animator = $animator($rootScope, {
|
||||
ngAnimate : '{show: \'custom\'}'
|
||||
});
|
||||
$rootScope.$digest();
|
||||
element.css('display','none');
|
||||
expect(element.css('display')).toBe('none');
|
||||
animator.show(element);
|
||||
|
|
@ -166,6 +181,7 @@ describe("$animator", function() {
|
|||
animator = $animator($rootScope, {
|
||||
ngAnimate : '{hide: \'custom\'}'
|
||||
});
|
||||
$rootScope.$digest();
|
||||
element.css('display','block');
|
||||
expect(element.css('display')).toBe('block');
|
||||
animator.hide(element);
|
||||
|
|
@ -181,6 +197,8 @@ describe("$animator", function() {
|
|||
ngAnimate : '"custom"'
|
||||
});
|
||||
|
||||
$rootScope.$digest();
|
||||
|
||||
//enter
|
||||
animator.enter(child, element);
|
||||
expect(child.attr('class')).toContain('custom-enter-setup');
|
||||
|
|
@ -222,6 +240,7 @@ describe("$animator", function() {
|
|||
animator = $animator($rootScope, {
|
||||
ngAnimate : '{show: \'setup-memo\'}'
|
||||
});
|
||||
$rootScope.$digest();
|
||||
expect(element.text()).toEqual('');
|
||||
animator.show(element);
|
||||
window.setTimeout.expect(1).process();
|
||||
|
|
@ -234,6 +253,8 @@ describe("$animator", function() {
|
|||
animator = $animator($rootScope, {
|
||||
ngAnimate : '{show: \'setup-memo\'}'
|
||||
});
|
||||
$rootScope.$digest();
|
||||
|
||||
element.text('123');
|
||||
expect(element.text()).toBe('123');
|
||||
animator.show(element);
|
||||
|
|
@ -262,11 +283,13 @@ describe("$animator", function() {
|
|||
it("should skip animations if disabled and run when enabled",
|
||||
inject(function($animator, $rootScope, $compile, $sniffer) {
|
||||
$animator.enabled(false);
|
||||
element = $compile('<div style="transition: 1s linear all">1</div>')($rootScope);
|
||||
element = $compile(html('<div style="' + vendorPrefix + 'transition: 1s linear all">1</div>'))($rootScope);
|
||||
var animator = $animator($rootScope, {
|
||||
ngAnimate : '{show: \'inline-show\'}'
|
||||
});
|
||||
|
||||
$rootScope.$digest(); // skip no-animate on first digest.
|
||||
|
||||
element.css('display','none');
|
||||
expect(element.css('display')).toBe('none');
|
||||
animator.show(element);
|
||||
|
|
@ -289,6 +312,7 @@ describe("$animator", function() {
|
|||
it("should throw an error when an invalid ng-animate syntax is provided", inject(function($compile, $rootScope) {
|
||||
expect(function() {
|
||||
element = $compile('<div ng-repeat="i in is" ng-animate=":"></div>')($rootScope);
|
||||
$rootScope.$digest();
|
||||
}).toThrow("Syntax Error: Token ':' not a primary expression at column 1 of the expression [:] starting at [:].");
|
||||
}));
|
||||
});
|
||||
|
|
|
|||
|
|
@ -282,7 +282,24 @@ describe('ngInclude', function() {
|
|||
});
|
||||
|
||||
describe('ngInclude ngAnimate', function() {
|
||||
var element, vendorPrefix, window;
|
||||
var vendorPrefix, window;
|
||||
var body, element;
|
||||
|
||||
function html(html) {
|
||||
body.html(html);
|
||||
element = body.children().eq(0);
|
||||
return element;
|
||||
}
|
||||
|
||||
beforeEach(function() {
|
||||
// we need to run animation on attached elements;
|
||||
body = jqLite(document.body);
|
||||
});
|
||||
|
||||
afterEach(function(){
|
||||
dealoc(body);
|
||||
dealoc(element);
|
||||
});
|
||||
|
||||
beforeEach(module(function($animationProvider, $provide) {
|
||||
$provide.value('$window', window = angular.mock.createMockWindow());
|
||||
|
|
@ -300,12 +317,12 @@ describe('ngInclude ngAnimate', function() {
|
|||
|
||||
$templateCache.put('enter', [200, '<div>data</div>', {}]);
|
||||
$rootScope.tpl = 'enter';
|
||||
element = $compile(
|
||||
element = $compile(html(
|
||||
'<div ' +
|
||||
'ng-include="tpl" ' +
|
||||
'ng-animate="{enter: \'custom-enter\'}">' +
|
||||
'</div>'
|
||||
)($rootScope);
|
||||
))($rootScope);
|
||||
$rootScope.$digest();
|
||||
|
||||
//if we add the custom css stuff here then it will get picked up before the animation takes place
|
||||
|
|
@ -332,12 +349,12 @@ describe('ngInclude ngAnimate', function() {
|
|||
inject(function($compile, $rootScope, $templateCache, $sniffer) {
|
||||
$templateCache.put('enter', [200, '<div>data</div>', {}]);
|
||||
$rootScope.tpl = 'enter';
|
||||
element = $compile(
|
||||
element = $compile(html(
|
||||
'<div ' +
|
||||
'ng-include="tpl" ' +
|
||||
'ng-animate="{leave: \'custom-leave\'}">' +
|
||||
'</div>'
|
||||
)($rootScope);
|
||||
))($rootScope);
|
||||
$rootScope.$digest();
|
||||
|
||||
//if we add the custom css stuff here then it will get picked up before the animation takes place
|
||||
|
|
@ -367,12 +384,12 @@ describe('ngInclude ngAnimate', function() {
|
|||
inject(function($compile, $rootScope, $templateCache, $sniffer) {
|
||||
$templateCache.put('enter', [200, '<div>data</div>', {}]);
|
||||
$rootScope.tpl = 'enter';
|
||||
element = $compile(
|
||||
element = $compile(html(
|
||||
'<div ' +
|
||||
'ng-include="tpl" ' +
|
||||
'ng-animate="{enter: \'custom-enter\'}">' +
|
||||
'</div>'
|
||||
)($rootScope);
|
||||
))($rootScope);
|
||||
$rootScope.$digest();
|
||||
|
||||
//if we add the custom css stuff here then it will get picked up before the animation takes place
|
||||
|
|
|
|||
|
|
@ -513,7 +513,24 @@ describe('ngRepeat', function() {
|
|||
});
|
||||
|
||||
describe('ngRepeat ngAnimate', function() {
|
||||
var element, vendorPrefix, window;
|
||||
var vendorPrefix, window;
|
||||
var body, element;
|
||||
|
||||
function html(html) {
|
||||
body.html(html);
|
||||
element = body.children().eq(0);
|
||||
return element;
|
||||
}
|
||||
|
||||
beforeEach(function() {
|
||||
// we need to run animation on attached elements;
|
||||
body = jqLite(document.body);
|
||||
});
|
||||
|
||||
afterEach(function(){
|
||||
dealoc(body);
|
||||
dealoc(element);
|
||||
});
|
||||
|
||||
beforeEach(module(function($animationProvider, $provide) {
|
||||
$provide.value('$window', window = angular.mock.createMockWindow());
|
||||
|
|
@ -522,20 +539,18 @@ describe('ngRepeat ngAnimate', function() {
|
|||
};
|
||||
}));
|
||||
|
||||
afterEach(function(){
|
||||
dealoc(element);
|
||||
});
|
||||
|
||||
it('should fire off the enter animation + add and remove the css classes',
|
||||
inject(function($compile, $rootScope, $sniffer) {
|
||||
|
||||
element = $compile(
|
||||
element = $compile(html(
|
||||
'<div><div ' +
|
||||
'ng-repeat="item in items" ' +
|
||||
'ng-animate="{enter: \'custom-enter\'}">' +
|
||||
'{{ item }}' +
|
||||
'</div></div>'
|
||||
)($rootScope);
|
||||
))($rootScope);
|
||||
|
||||
$rootScope.$digest(); // re-enable the animations;
|
||||
|
||||
$rootScope.items = ['1','2','3'];
|
||||
$rootScope.$digest();
|
||||
|
|
@ -572,13 +587,13 @@ describe('ngRepeat ngAnimate', function() {
|
|||
it('should fire off the leave animation + add and remove the css classes',
|
||||
inject(function($compile, $rootScope, $sniffer) {
|
||||
|
||||
element = $compile(
|
||||
element = $compile(html(
|
||||
'<div><div ' +
|
||||
'ng-repeat="item in items" ' +
|
||||
'ng-animate="{leave: \'custom-leave\'}">' +
|
||||
'{{ item }}' +
|
||||
'</div></div>'
|
||||
)($rootScope);
|
||||
))($rootScope);
|
||||
|
||||
$rootScope.items = ['1','2','3'];
|
||||
$rootScope.$digest();
|
||||
|
|
@ -612,13 +627,13 @@ describe('ngRepeat ngAnimate', function() {
|
|||
|
||||
it('should fire off the move animation + add and remove the css classes',
|
||||
inject(function($compile, $rootScope, $sniffer) {
|
||||
element = $compile(
|
||||
element = $compile(html(
|
||||
'<div>' +
|
||||
'<div ng-repeat="item in items" ng-animate="{move: \'custom-move\'}">' +
|
||||
'{{ item }}' +
|
||||
'</div>' +
|
||||
'</div>'
|
||||
)($rootScope);
|
||||
))($rootScope);
|
||||
|
||||
$rootScope.items = ['1','2','3'];
|
||||
$rootScope.$digest();
|
||||
|
|
@ -666,13 +681,15 @@ describe('ngRepeat ngAnimate', function() {
|
|||
it('should catch and use the correct duration for animation',
|
||||
inject(function($compile, $rootScope, $sniffer) {
|
||||
|
||||
element = $compile(
|
||||
element = $compile(html(
|
||||
'<div><div ' +
|
||||
'ng-repeat="item in items" ' +
|
||||
'ng-animate="{enter: \'custom-enter\'}">' +
|
||||
'{{ item }}' +
|
||||
'</div></div>'
|
||||
)($rootScope);
|
||||
))($rootScope);
|
||||
|
||||
$rootScope.$digest(); // re-enable the animations;
|
||||
|
||||
$rootScope.items = ['a','b'];
|
||||
$rootScope.$digest();
|
||||
|
|
|
|||
|
|
@ -43,8 +43,25 @@ describe('ngShow / ngHide', function() {
|
|||
});
|
||||
|
||||
describe('ngShow / ngHide - ngAnimate', function() {
|
||||
var element, window;
|
||||
var window;
|
||||
var vendorPrefix;
|
||||
var body, element;
|
||||
|
||||
function html(html) {
|
||||
body.html(html);
|
||||
element = body.children().eq(0);
|
||||
return element;
|
||||
}
|
||||
|
||||
beforeEach(function() {
|
||||
// we need to run animation on attached elements;
|
||||
body = jqLite(document.body);
|
||||
});
|
||||
|
||||
afterEach(function(){
|
||||
dealoc(body);
|
||||
dealoc(element);
|
||||
});
|
||||
|
||||
beforeEach(module(function($animationProvider, $provide) {
|
||||
$provide.value('$window', window = angular.mock.createMockWindow());
|
||||
|
|
@ -53,21 +70,17 @@ describe('ngShow / ngHide - ngAnimate', function() {
|
|||
};
|
||||
}));
|
||||
|
||||
afterEach(function() {
|
||||
dealoc(element);
|
||||
});
|
||||
|
||||
describe('ngShow', function() {
|
||||
it('should fire off the animator.show and animator.hide animation', inject(function($compile, $rootScope, $sniffer) {
|
||||
var $scope = $rootScope.$new();
|
||||
$scope.on = true;
|
||||
element = $compile(
|
||||
element = $compile(html(
|
||||
'<div ' +
|
||||
'style="'+vendorPrefix+'transition: 1s linear all"' +
|
||||
'ng-show="on" ' +
|
||||
'ng-animate="{show: \'custom-show\', hide: \'custom-hide\'}">' +
|
||||
'ng-animate="{show: \'custom-show\', hide: \'custom-hide\', animateFirst: true}">' +
|
||||
'</div>'
|
||||
)($scope);
|
||||
))($scope);
|
||||
$scope.$digest();
|
||||
|
||||
if ($sniffer.supportsTransitions) {
|
||||
|
|
@ -97,19 +110,43 @@ describe('ngShow / ngHide - ngAnimate', function() {
|
|||
expect(element.attr('class')).not.toContain('custom-hide-start');
|
||||
expect(element.attr('class')).not.toContain('custom-hide-setup');
|
||||
}));
|
||||
|
||||
it('should skip the initial show state on the first digest', function() {
|
||||
var fired = false;
|
||||
inject(function($compile, $rootScope, $sniffer) {
|
||||
$rootScope.val = true;
|
||||
var element = $compile(html('<div ng-show="val" ng-animate="\'animation\'">123</div>'))($rootScope);
|
||||
element.css('display','none');
|
||||
expect(element.css('display')).toBe('none');
|
||||
|
||||
$rootScope.$digest();
|
||||
expect(element[0].style.display).toBe('');
|
||||
expect(fired).toBe(false);
|
||||
|
||||
$rootScope.val = false;
|
||||
$rootScope.$digest();
|
||||
if ($sniffer.supportsTransitions) {
|
||||
window.setTimeout.expect(1).process();
|
||||
window.setTimeout.expect(0).process();
|
||||
} else {
|
||||
expect(window.setTimeout.queue).toEqual([]);
|
||||
}
|
||||
expect(element[0].style.display).toBe('none');
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
describe('ngHide', function() {
|
||||
it('should fire off the animator.show and animator.hide animation', inject(function($compile, $rootScope, $sniffer) {
|
||||
var $scope = $rootScope.$new();
|
||||
$scope.off = true;
|
||||
element = $compile(
|
||||
element = $compile(html(
|
||||
'<div ' +
|
||||
'style="'+vendorPrefix+'transition: 1s linear all"' +
|
||||
'ng-hide="off" ' +
|
||||
'ng-animate="{show: \'custom-show\', hide: \'custom-hide\'}">' +
|
||||
'</div>'
|
||||
)($scope);
|
||||
'ng-animate="{show: \'custom-show\', hide: \'custom-hide\', animateFirst: true}">' +
|
||||
'</div>'
|
||||
))($scope);
|
||||
$scope.$digest();
|
||||
|
||||
if ($sniffer.supportsTransitions) {
|
||||
|
|
@ -140,5 +177,31 @@ describe('ngShow / ngHide - ngAnimate', function() {
|
|||
expect(element.attr('class')).not.toContain('custom-show-start');
|
||||
expect(element.attr('class')).not.toContain('custom-show-setup');
|
||||
}));
|
||||
|
||||
it('should skip the initial hide state on the first digest', function() {
|
||||
var fired = false;
|
||||
module(function($animationProvider) {
|
||||
$animationProvider.register('destructive-animation', function() {
|
||||
return {
|
||||
setup : function() {},
|
||||
start : function(element, done) {
|
||||
fired = true;
|
||||
}
|
||||
};
|
||||
});
|
||||
});
|
||||
inject(function($compile, $rootScope) {
|
||||
$rootScope.val = false;
|
||||
var element = $compile(html('<div ng-hide="val" ng-animate="{ hide:\'destructive-animation\' }">123</div>'))($rootScope);
|
||||
element.css('display','block');
|
||||
expect(element.css('display')).toBe('block');
|
||||
|
||||
$rootScope.val = true;
|
||||
$rootScope.$digest();
|
||||
|
||||
expect(element.css('display')).toBe('none');
|
||||
expect(fired).toBe(false);
|
||||
});
|
||||
});
|
||||
});
|
||||
});
|
||||
|
|
|
|||
|
|
@ -215,7 +215,24 @@ describe('ngSwitch', function() {
|
|||
});
|
||||
|
||||
describe('ngSwitch ngAnimate', function() {
|
||||
var element, vendorPrefix, window;
|
||||
var vendorPrefix, window;
|
||||
var body, element;
|
||||
|
||||
function html(html) {
|
||||
body.html(html);
|
||||
element = body.children().eq(0);
|
||||
return element;
|
||||
}
|
||||
|
||||
beforeEach(function() {
|
||||
// we need to run animation on attached elements;
|
||||
body = jqLite(document.body);
|
||||
});
|
||||
|
||||
afterEach(function(){
|
||||
dealoc(body);
|
||||
dealoc(element);
|
||||
});
|
||||
|
||||
beforeEach(module(function($animationProvider, $provide) {
|
||||
$provide.value('$window', window = angular.mock.createMockWindow());
|
||||
|
|
@ -224,22 +241,19 @@ describe('ngSwitch ngAnimate', function() {
|
|||
};
|
||||
}));
|
||||
|
||||
afterEach(function(){
|
||||
dealoc(element);
|
||||
});
|
||||
|
||||
it('should fire off the enter animation + set and remove the classes',
|
||||
inject(function($compile, $rootScope, $sniffer) {
|
||||
var $scope = $rootScope.$new();
|
||||
var style = vendorPrefix + 'transition: 1s linear all';
|
||||
element = $compile(
|
||||
element = $compile(html(
|
||||
'<div ng-switch on="val" ng-animate="{enter: \'cool-enter\', leave: \'cool-leave\'}">' +
|
||||
'<div ng-switch-when="one" style="' + style + '">one</div>' +
|
||||
'<div ng-switch-when="two" style="' + style + '">two</div>' +
|
||||
'<div ng-switch-when="three" style="' + style + '">three</div>' +
|
||||
'</div>'
|
||||
)($scope);
|
||||
))($scope);
|
||||
|
||||
$rootScope.$digest(); // re-enable the animations;
|
||||
$scope.val = 'one';
|
||||
$scope.$digest();
|
||||
|
||||
|
|
@ -265,14 +279,15 @@ describe('ngSwitch ngAnimate', function() {
|
|||
inject(function($compile, $rootScope, $sniffer) {
|
||||
var $scope = $rootScope.$new();
|
||||
var style = vendorPrefix + 'transition: 1s linear all';
|
||||
element = $compile(
|
||||
element = $compile(html(
|
||||
'<div ng-switch on="val" ng-animate="{enter: \'cool-enter\', leave: \'cool-leave\'}">' +
|
||||
'<div ng-switch-when="one" style="' + style + '">one</div>' +
|
||||
'<div ng-switch-when="two" style="' + style + '">two</div>' +
|
||||
'<div ng-switch-when="three" style="' + style + '">three</div>' +
|
||||
'</div>'
|
||||
)($scope);
|
||||
))($scope);
|
||||
|
||||
$rootScope.$digest(); // re-enable the animations;
|
||||
$scope.val = 'two';
|
||||
$scope.$digest();
|
||||
|
||||
|
|
@ -313,12 +328,13 @@ describe('ngSwitch ngAnimate', function() {
|
|||
|
||||
it('should catch and use the correct duration for animation',
|
||||
inject(function($compile, $rootScope, $sniffer) {
|
||||
element = $compile(
|
||||
element = $compile(html(
|
||||
'<div ng-switch on="val" ng-animate="{enter: \'cool-enter\', leave: \'cool-leave\'}">' +
|
||||
'<div ng-switch-when="one" style="' + vendorPrefix + 'transition: 0.5s linear all">one</div>' +
|
||||
'</div>'
|
||||
)($rootScope);
|
||||
))($rootScope);
|
||||
|
||||
$rootScope.$digest(); // re-enable the animations;
|
||||
$rootScope.val = 'one';
|
||||
$rootScope.$digest();
|
||||
|
||||
|
|
|
|||
|
|
@ -486,7 +486,26 @@ describe('ngView', function() {
|
|||
});
|
||||
|
||||
describe('ngAnimate', function() {
|
||||
var element, window;
|
||||
var window;
|
||||
var body, element;
|
||||
|
||||
function html(html) {
|
||||
body.html(html);
|
||||
element = body.children().eq(0);
|
||||
return element;
|
||||
}
|
||||
|
||||
beforeEach(function() {
|
||||
// we need to run animation on attached elements;
|
||||
body = jqLite(document.body);
|
||||
});
|
||||
|
||||
afterEach(function(){
|
||||
dealoc(body);
|
||||
dealoc(element);
|
||||
});
|
||||
|
||||
|
||||
|
||||
beforeEach(module(function($provide, $routeProvider) {
|
||||
$provide.value('$window', window = angular.mock.createMockWindow());
|
||||
|
|
@ -496,13 +515,9 @@ describe('ngAnimate', function() {
|
|||
}
|
||||
}));
|
||||
|
||||
afterEach(function(){
|
||||
dealoc(element);
|
||||
});
|
||||
|
||||
it('should fire off the enter animation + add and remove the css classes',
|
||||
inject(function($compile, $rootScope, $sniffer, $location, $templateCache) {
|
||||
element = $compile('<div ng-view ng-animate="{enter: \'custom-enter\'}"></div>')($rootScope);
|
||||
element = $compile(html('<div ng-view ng-animate="{enter: \'custom-enter\'}"></div>'))($rootScope);
|
||||
|
||||
$location.path('/foo');
|
||||
$rootScope.$digest();
|
||||
|
|
@ -530,7 +545,7 @@ describe('ngAnimate', function() {
|
|||
it('should fire off the leave animation + add and remove the css classes',
|
||||
inject(function($compile, $rootScope, $sniffer, $location, $templateCache) {
|
||||
$templateCache.put('/foo.html', [200, '<div>foo</div>', {}]);
|
||||
element = $compile('<div ng-view ng-animate="{leave: \'custom-leave\'}"></div>')($rootScope);
|
||||
element = $compile(html('<div ng-view ng-animate="{leave: \'custom-leave\'}"></div>'))($rootScope);
|
||||
|
||||
$location.path('/foo');
|
||||
$rootScope.$digest();
|
||||
|
|
@ -561,12 +576,12 @@ describe('ngAnimate', function() {
|
|||
it('should catch and use the correct duration for animations',
|
||||
inject(function($compile, $rootScope, $sniffer, $location, $templateCache) {
|
||||
$templateCache.put('/foo.html', [200, '<div>foo</div>', {}]);
|
||||
element = $compile(
|
||||
element = $compile(html(
|
||||
'<div ' +
|
||||
'ng-view ' +
|
||||
'ng-animate="{enter: \'customEnter\'}">' +
|
||||
'ng-animate="{enter: \'customEnter\', animateFirst: false}">' +
|
||||
'</div>'
|
||||
)($rootScope);
|
||||
))($rootScope);
|
||||
|
||||
$location.path('/foo');
|
||||
$rootScope.$digest();
|
||||
|
|
|
|||
Loading…
Reference in a new issue