调用单个 li 项目的 angular 动画

Question

这是我第一次尝试任何 angular 动画。我的目标是在从列表中删除时简单地为 li 设置动画。我想我说的一切都是对的，但它似乎在为所有 li 项目设置动画，而不仅仅是删除的项目。我需要通过某种方式获得对 "this li" 的引用吗？（当我尝试为添加的 li 设置动画时也会发生这种情况，它会影响所有其他 li。）

组件

@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);
  }

和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>

我以为这会很容易...哈哈

Answer 1

您需要将动画范围限定为单个项目：

 <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>

和

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

调用单个 li 项目的 angular 动画

Calling an angular animation an a single li item

angular

animation

angular-animations