mirror of
https://github.com/zhigang1992/angular.js.git
synced 2026-04-13 22:39:59 +08:00
1cb8584e84
With 1.2.x, `$animate.enter` and `$animate.move` both insert the element at the end of the provided parent container element when only the `parent` element is provided. If an `after` element is provided then they will place the inserted element after that one. This works fine, but there is no way to place an item at the top of the provided parent container using these two APIs. With this change, if the `after` argument is not specified for either `$animate.enter` or `$animate.move`, the new child element will be inserted into the first position of the parent container element. Closes #4934 Closes #6275 BREAKING CHANGE: $animate will no longer default the after parameter to the last element of the parent container. Instead, when after is not specified, the new element will be inserted as the first child of the parent container. To update existing code, change all instances of `$animate.enter()` or `$animate.move()` from: `$animate.enter(element, parent);` to: `$animate.enter(element, parent, angular.element(parent[0].lastChild));`
78 lines
2.7 KiB
JavaScript
78 lines
2.7 KiB
JavaScript
describe("$animate", function() {
|
|
|
|
describe("without animation", function() {
|
|
beforeEach(module(function() {
|
|
return function($compile, _$rootElement_, $rootScope) {
|
|
element = $compile('<div></div>')($rootScope);
|
|
$rootElement = _$rootElement_;
|
|
};
|
|
}));
|
|
|
|
it("should add element at the start of enter animation", inject(function($animate, $compile, $rootScope) {
|
|
var child = $compile('<div></div>')($rootScope);
|
|
expect(element.contents().length).toBe(0);
|
|
$animate.enter(child, element);
|
|
expect(element.contents().length).toBe(1);
|
|
}));
|
|
|
|
it("should enter the element to the start of the parent container",
|
|
inject(function($animate, $compile, $rootScope) {
|
|
|
|
for(var i = 0; i < 5; i++) {
|
|
element.append(jqLite('<div> ' + i + '</div>'));
|
|
}
|
|
|
|
var child = jqLite('<div>first</div>');
|
|
$animate.enter(child, element);
|
|
|
|
expect(element.text()).toEqual('first 0 1 2 3 4');
|
|
}));
|
|
|
|
it("should remove the element at the end of leave animation", inject(function($animate, $compile, $rootScope) {
|
|
var child = $compile('<div></div>')($rootScope);
|
|
element.append(child);
|
|
expect(element.contents().length).toBe(1);
|
|
$animate.leave(child);
|
|
expect(element.contents().length).toBe(0);
|
|
}));
|
|
|
|
it("should reorder the move animation", inject(function($animate, $compile, $rootScope) {
|
|
var child1 = $compile('<div>1</div>')($rootScope);
|
|
var child2 = $compile('<div>2</div>')($rootScope);
|
|
element.append(child1);
|
|
element.append(child2);
|
|
expect(element.text()).toBe('12');
|
|
$animate.move(child1, element, child2);
|
|
expect(element.text()).toBe('21');
|
|
}));
|
|
|
|
it("should still perform DOM operations even if animations are disabled", inject(function($animate) {
|
|
$animate.enabled(false);
|
|
expect(element).toBeShown();
|
|
$animate.addClass(element, 'ng-hide');
|
|
expect(element).toBeHidden();
|
|
}));
|
|
|
|
it("should add and remove classes on SVG elements", inject(function($animate) {
|
|
if (!window.SVGElement) return;
|
|
var svg = jqLite('<svg><rect></rect></svg>');
|
|
var rect = svg.children();
|
|
$animate.enabled(false);
|
|
expect(rect).toBeShown();
|
|
$animate.addClass(rect, 'ng-hide');
|
|
expect(rect).toBeHidden();
|
|
$animate.removeClass(rect, 'ng-hide');
|
|
expect(rect).not.toBeHidden();
|
|
}));
|
|
|
|
it("should throw error on wrong selector", function() {
|
|
module(function($animateProvider) {
|
|
expect(function() {
|
|
$animateProvider.register('abc', null);
|
|
}).toThrowMinErr("$animate", "notcsel", "Expecting class selector starting with '.' got 'abc'.");
|
|
});
|
|
inject();
|
|
});
|
|
});
|
|
});
|