0

This is my first try at any angular animation. My aim is to simply animate an li when it is removed from the list. I think I'm calling everything right, but it seems to be animating all the li items, instead of just the one deleted. Do I need to get a reference to a "this li" some how? (this also happens when I try to animate an added li, it effects all other li.)

component

@Component({
  selector: 'to-do',
  templateUrl: './to-do.component.html',
  styleUrls: ['./to-do.component.css'],
  animations: [
    trigger('flyOut', [
      state('hide', style({
        opacity: 0,
        transform: 'translateX(-100%)'
      })),
      transition( '* => *', [animate(500)] )
    ])
  ]

}) //end of @component
export class ToDoComponent implements OnInit {

  animationState: string;
  newTodo: string;
  todos: any;

  constructor() {    
  }

  addTodo(event) { 
    // bla bla
  }

  deleteTodo(i, name:string) {
    this.animationState = name;
    this.todos.splice(i, 1);
    this.setLocalStorageTodos(this.todos);
  }

and html 

<ul id="todo-list">
    <li class="search-item" [@flyOut]="animationState" *ngFor="let todoItem of todos; let i=index ">
      <span class="todo-item">{{ todoItem }}</span>
      <span class="delet-todo" (click)="deleteTodo(i, 'hide')">&#10005;</span>
    </li>

I thought this would be easy... haha

Draxy
  • 565
  • 3
  • 6
  • 20

1 Answers1

1

You need to scope the animation to a single item: 

 <li class="search-item" [@flyOut]="todoItem.animationState" *ngFor="let todoItem of todos; let i=index ">
  <span class="todo-item">{{ todoItem }}</span>
  <span class="delet-todo" (click)="deleteTodo(i, 'hide')">&#10005;</span>
</li>

And

deleteTodo(i, name:string) {
    this.todos[i].animationState = name;
    this.todos.splice(i, 1);
    this.setLocalStorageTodos(this.todos);
  }
Michael Kang
  • 52,003
  • 16
  • 103
  • 135
  • This gives the error "Cannot create property 'animationState' on string 'test'". I've never had that error before, is there something else I need to change? – Draxy Nov 09 '17 at 02:04
  • you should try to scope the property to an item somehow. i.e. use a custom todoItem with a animationState property, or alternatively, create an array to keep track of it – Michael Kang Nov 09 '17 at 02:06
  • Thanks, still not working but you've set me on the right path – Draxy Nov 09 '17 at 02:56
  • Hello @Draxy, could you share your knowledge here to have others walk with you on the path? – sven.kwiotek Apr 06 '21 at 16:48