search

michaelbromley / ngx-pagination

Pagination for Angular
http://michaelbromley.github.io/ngx-pagination/
MIT License
1.23k stars 244 forks source link

Items from previous page remain until animation is over #213

Closed mathieubruguier closed 6 years ago

mathieubruguier commented 6 years ago

Angular version: 4.4.4

ngx-pagination version: 3.0.3

Description of issue: When switching pages, the items from the previous page remain until the animation is done playing.

Steps to reproduce: Add animations to the *ngFor, switch pages.

Expected result: The items from the previous page should disappear as soon as the new ones appear.

Actual result: The items from the new page appear and the items from the old page remain until the animation is done playing, which means that for a period of time, you have double the items on the page.

Demo: https://stackblitz.com/edit/angular-csx6eq

The Stackblitz should contain all the code needed, but I can always provide more evidence and/or help, if needed. Thank you!

michaelbromley commented 6 years ago

Hi,

Thanks for this issue - it gave me an excuse to play with the Animations module for the first time :)

It looks like the problem is with your animation definition. You are applying a 0.3s animation to all transitions (* => *), which is causing the problem.

See an amended version of your demo: https://stackblitz.com/edit/angular-mjprb4

Notice that I changed the transition expression to void => * which will apply only to the "incoming" elements, i.e. the next page of items. The outgoing page items will simply be removed instantly as usual.

Hope that helps.

mathieubruguier commented 6 years ago

Thank you so much, that fixed it. It actually makes perfect sense in hindsight.