New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

animation for :decrement is not executing inside *ngFor #26667

Open
ericsnap opened this Issue Oct 23, 2018 · 2 comments

Comments

Projects
None yet
4 participants
@ericsnap
Copy link

ericsnap commented Oct 23, 2018

I'm submitting a...


[ ] Regression (a behavior that used to work and stopped working in a new release)
[x] Bug report  
[ ] Performance issue
[ ] Feature request
[ ] Documentation issue or request
[ ] Support request => Please do not submit support request here, instead see https://github.com/angular/angular/blob/master/CONTRIBUTING.md#question
[ ] Other... Please describe:

Current behavior

When trying to animate a list (using div elements and *ngFor) where items are moved up and down by one position, one at a time, the animation for :decrement is not executing, only the :increment transition is executing.
After 2 rounds, the expected behavior is finally correct and both the :decrement and :increment transition are executed.

Expected behavior

I would expect both the :decrement and :increment transition to be fired from the beginning since the variable to which the transition is attached is decremented for one element, but incremented for the other one.

Minimal reproduction of the problem with instructions

https://stackblitz.com/edit/angular-ae6tq9

The gist of the code:

//...
@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  animations: [
    trigger('move', [
      transition(':decrement', [style({ opacity: 0 }), animate('1s ease', style({ opacity: 1 }))]),
      transition(':increment', [style({ transform: 'scale(0.5)' }), animate('1s ease', style({ transform: 'scale(1)' }))]),
    ])
  ],
  styleUrls: ['./app.component.css']
})
export class AppComponent {
//...
  moveUp(item: string) {
    const index = this.items.indexOf(item);
    if (index > 0) {
      this.items.splice(index, 1);
      this.items.splice(index - 1, 0, item);
    }
  }

  moveDown(item: string) {
    const index = this.items.indexOf(item);
    if (index < this.items.length) {
      this.items.splice(index, 1);
      this.items.splice(index + 1, 0, item);
    }
  }
}
<div *ngFor="let item of items; let index = index;">
	<div [@move]="index">
		<span (click)="moveUp(item)">^</span>&nbsp;<span (click)="moveDown(item)">v</span> {{index}} : {{item}} 
  </div>
</div>

What is the motivation / use case for changing the behavior?

Unless there is something wrong with my code, this bug is preventing animation on simple list reordering.

Environment


Angular version: X.Y.Z


Browser:
- [x] Chrome (desktop) version 69.0.3497.100
- [ ] Chrome (Android) version XX
- [ ] Chrome (iOS) version XX
- [x] Firefox version 59.0.2
- [x] Safari (desktop) version 12.0
- [ ] Safari (iOS) version XX
- [ ] IE version XX
- [ ] Edge version XX
 
For Tooling issues:
- Node version: XX  
- Platform:  

Others:

@bennadel

This comment has been minimized.

Copy link

bennadel commented Jan 2, 2019

I am hitting this issue as well.

@bennadel

This comment has been minimized.

Copy link

bennadel commented Jan 2, 2019

I think this issue might actually be deeper. I am finding that with an animation trigger of [@trigger]="index" and a transition of *<=>* inside of an ngFor loop, animations just seem to stop working after a few transition. So, I don't think this is tied to :decrement - I think it's tied to a problem in ngFor animations.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment