Permalink
Browse files

feat(animations): support negative query option values

closes #19259
  • Loading branch information...
matsko authored and vicb committed Sep 18, 2017
1 parent b54368b commit 86ffacf7ce4ed669aaeb6593c9b3a2aac17825a7
@@ -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);
}
@@ -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: `
<div [@myAnimation]="exp">
<div *ngFor="let item of items" class="item">
{{ item }}
</div>
</div>
`,
animations: [
trigger(
'myAnimation',
[
transition(
'* => go',
[
query(
'.item',
[
style({opacity: 0}),
animate('1s', style({opacity: 1})),
],
{limit: -3}),
]),
]),
]
})
class Cmp {
public exp: any;
public items: any[] = [];
}
TestBed.configureTestingModule({declarations: [Cmp]});
const fixture = TestBed.createComponent(Cmp);
const cmp = fixture.componentInstance;
cmp.items = ['a', 'b', 'c', 'd', 'e'];
fixture.detectChanges();
cmp.exp = 'go';
fixture.detectChanges();
const players = getLog() as any[];
expect(players.length).toEqual(3);
expect(players[0].element.innerText.trim()).toEqual('c');
expect(players[1].element.innerText.trim()).toEqual('d');
expect(players[2].element.innerText.trim()).toEqual('e');
});
});
});

1 comment on commit 86ffacf

@IgorMinar

This comment has been minimized.

Show comment
Hide comment
@IgorMinar

IgorMinar Sep 27, 2017

Member

the commit message for this is not sufficient. it should have said that animation queries now support negative limits, in which case we will be matching elements from the end rather than from the beginning - this is similar to how many functions that work on arrays work.

Member

IgorMinar commented on 86ffacf Sep 27, 2017

the commit message for this is not sufficient. it should have said that animation queries now support negative limits, in which case we will be matching elements from the end rather than from the beginning - this is similar to how many functions that work on arrays work.

Please sign in to comment.