如何在Angular中淡入和淡出组件

Question

我有一个以 angular 编写的待办事项列表应用程序，我想在每个待办事项创建时淡入淡出，并在删除它们之前淡出它们。如果我在 todo-item 组件中应用效果，我只能让淡入效果起作用，但是淡出效果不起作用。我已经尝试将动画添加到父待办事项组件中，但是这对淡入或淡出都不起作用。

todos.component.ts (todo-items 的父容器)

animations: [
    trigger('fade', [      
      transition('void => *', [
        style({opacity: 0}),
        animate(1000, style({opacity: 1}))
      ]),
      transition('* => void', [
        animate(1000, style({opacity: 0}))
      ])
    ])

]
})
export class TodosComponent implements OnInit {
  todos:Todo[];
  constructor(private todoService:TodoService) {
   }

  ngOnInit() {
    this.todoService.getTodos().subscribe(todos=> { this.todos = todos});
  }
  deleteTodo(todo:Todo){
    this.todos.splice(this.todos.indexOf(todo), 1);
    this.todoService.deleteTodo(todo).subscribe();
  }
  addTodo(todo:Todo){
    this.todoService.addTodo(todo).subscribe(todo=>{
      this.todos.push(todo);

    })
  }
}

todos.component.html（todo-items 的父容器）

<app-add-todo (addTodo)="addTodo($event)"></app-add-todo>
<app-todo-item 
@fade
*ngFor="let todo of todos" 
[todo] = "todo"
(deleteTodo)="deleteTodo($event)"
>
</app-todo-item>

todo-item.component.ts

export class TodoItemComponent implements OnInit {
  @Input() todo: Todo;
  @Output() deleteTodo: EventEmitter<Todo> = new EventEmitter();

  setClasses(){
    let classes = {
      todo: true,
      'is-complete': this.todo.completed
    }

    return classes
  }
  onToggle(todo) {
    todo.completed = !todo.completed;
    this.todoService.toggleCompleted(todo).subscribe( todo => console.log(todo));
  }
  onDelete(todo){
    this.deleteTodo.emit(todo);
  }
  constructor(private todoService:TodoService) { }

  ngOnInit() {
  }

}

todo-item.component.html

<div [ngClass] = "setClasses()">
    <p>
        <input (change)="onToggle(todo)" type="checkbox"/>
        {{todo.title}}
        <button (click)="onDelete(todo)" class="del">x</button>
    </p>   
</div>

Answer 1

对于动画，我经常使用https://animista.net/他们提供简单的 CSS 动画。

要使用它们，您只需将类添加到 fade int 中，当单击删除时，您需要设置淡出类 - 动画完成后，您将使用计时器真正删除对象。

删除时，您需要动态地将其设置为另一个类，类似的方法可以工作：

<div [className]="someValue"></div>

（来自： https: //malcoded.com/posts/angular-ngclass/）

删除时，您还需要创建一个计时器，以便仅在动画完成后删除该元素。简单定时器的示例：

// repeat with the interval of 2 seconds
let timerId = setInterval(() => alert('tick'), 2000);

// after 5 seconds stop
setTimeout(() => { clearInterval(timerId); alert('stop'); }, 5000);

希望能帮助到你！

Answer 2

ToDo我在类中又添加了一个字段，status即特定的todo-item.

使用它，我们可以通过将属性绑定到来status转换动画状态status@fade

演示

在这里，我删除列表中添加的任何随机项目。

todo-parent.component.ts

@Component({
  selector: 'app-todo-parent',
  templateUrl: './todo-parent.component.html',
  styleUrls: ['./todo-parent.component.css'],
  animations: [
    trigger('fade', [
      transition('void => active', [ // using status here for transition
        style({ opacity: 0 }),
        animate(1000, style({ opacity: 1 }))
      ]),
      transition('* => void', [
        animate(1000, style({ opacity: 0 }))
      ])
    ])
  ]
})
export class TodoParentComponent {

  todoList: {str: string, status: string}[] = [];

  addItem() {
    this.todoList.push({str: 'added :' + this.todoList.length, status: 'active'});
  }

  deleteRandom() {
    const num = Math.ceil(Math.random() * this.todoList.length);
    this.todoList.splice(num, 1);
  }
}

todo-parent.component.html

<div style="width: 250px">
  <div *ngFor="let todo of todoList" [@fade]="todo.status"> <!-- using status here for transition -->
    <app-todo-item [todoValue]="todo.str"></app-todo-item>
  </div>
</div>

无需在您的todo-item组件中执行任何操作。

Answer 3

所以我找到了我的问题的答案。淡入淡出效果不适用于组件标签。因此，在我的 todos.component.html （父 todo-item 容器）中，我创建了一个 div 来包装我的 todo-item 标签；我将触发器名称应用于它。

我修改后的todos.component.html

<app-add-todo (addTodo)="addTodo($event)"></app-add-todo>
<div @fade *ngFor="let todo of todos">
<app-todo-item [todo] = "todo" (deleteTodo)="deleteTodo($event)">
</app-todo-item>
</div>