diff --git a/packages/animations/browser/src/dsl/animation_timeline_builder.ts b/packages/animations/browser/src/dsl/animation_timeline_builder.ts index f0332c9e5b..51cd604c22 100644 --- a/packages/animations/browser/src/dsl/animation_timeline_builder.ts +++ b/packages/animations/browser/src/dsl/animation_timeline_builder.ts @@ -558,7 +558,8 @@ export class AnimationTimelineContext { const multi = limit != 1; let elements = this._driver.query(this.element, selector, multi); if (limit !== 0) { - elements = elements.slice(0, limit); + elements = limit < 0 ? elements.slice(elements.length + limit, elements.length) : + elements.slice(0, limit); } results.push(...elements); } diff --git a/packages/core/test/animation/animation_query_integration_spec.ts b/packages/core/test/animation/animation_query_integration_spec.ts index a0ebbc9a80..a414458014 100644 --- a/packages/core/test/animation/animation_query_integration_spec.ts +++ b/packages/core/test/animation/animation_query_integration_spec.ts @@ -1762,6 +1762,56 @@ export function main() { expect(players[0].element.innerText.trim()).toEqual('a'); expect(players[1].element.innerText.trim()).toEqual('b'); }); + + it('should support negative limit values by pulling in elements from the end of the query', + () => { + @Component({ + selector: 'cmp', + template: ` +