Question

这是我对任何角度动画的第一次尝试。我的目的是在从列表中删除li时简单地设置动画。我想我说的一切都是正确的，但它似乎是动画所有的li项目，而不仅仅是删除的项目。我是否需要参考“这个李”一些如何？（这也发生在我尝试为添加的li设置动画时，它会影响所有其他li。）

成分</ P>

@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项目

1 个答案: