如何在Angular中删除项目时添加淡入淡出的动画效果？答案

【问题标题】：How to add a fading animation effect when a item is deleted in Angular?如何在Angular中删除项目时添加淡入淡出的动画效果？
【发布时间】：2020-03-20 14:26:03
【问题描述】：

这是我的html文件

<html>
<head>

</head>
<body>



  <button class="button1" routerLink="/home" title="Home"><span> Back</span></button> 
  <h3 class="class0">Selected Projects</h3>
  <img id="id1" src="../assets/images/cart2.jpg" title="Cart Items">




  <div class="div1">
    <table>
      <tr>
        <th>Project Name</th>
        <th>Technologies</th>
        <th>Description</th>
        <th>Sectors</th>
        <th>Preview</th>
        <th>Delete</th>
      </tr>
      <tr *ngFor="let data of selectedItem">
        <td><span [title]=data.Projectname>{{data.Projectname}}</span></td>
        <td><span [title]=data.technologies>{{data.technologies}}</span></td>
        <td><span [title]=data.projectdescription>{{data.projectdescription}}</span></td>
        <td><span [title]=data.sector>{{data.sector}}</span></td>
        <td><button id="button2" mat-button (click)="openDialog(data)"title="Preview"><img src="../assets/images/eye.png"></button>
          <td><button id="button2" type="button" title="Delete" (click)="deleteFromCart(data.id)"><img
                src="../assets/images/delete2.jpg"></button></td>
      </tr>

    </table>
  </div>
  <div class="popup-overlay" *ngIf="currentItem">

    <div class="pupup">
        <div class="title">Project Preview</div>
      <button class="order" (click)="closeDialog()"title="Close">X</button>

      <table id=table>
        <tr>
          <td>Name: </td>
          <td id=td>{{currentItem.Projectname}}</td> 
        </tr>
        <tr>
            <td>Technologies: </td>
            <td id=td>{{currentItem.technologies}}</td> 
          </tr>
          <tr>
              <td>Description : </td>
              <td id=td>{{currentItem.projectdescription}}</td> 
            </tr>
            <tr>
            <td >Sector : </td>
            <td id=td>{{currentItem.sector}}</td>
          </tr>

      </table>

    </div>
  </div>

  <!-- <div class="div2">
            <a href="#"><h4>Presentations</h4></a> 
            <a href="#"><h4>Links</h4></a> 
            <a href="#"><h4>Videos</h4></a> 

         </div> -->

</body>

</html>

这是我编写的删除函数

export class Slide10Component implements OnInit {
  selectedItem = [];
  currentItem: any;
  dialog: any;

  constructor(private employeService: EmployeeService) { }

  ngOnInit() {
    this.getdata()
  }
  deleteFromCart(id){
    this.employeService.deleteFromCart(id).subscribe((data:any)=>{
      alert("Data deleted succefully");
      this.getdata()

    })
  }

我刚刚发布了 componenet.ts 文件中的部分代码部分。我添加了一个 deleteFromCart() 方法来完成这项工作。从表中删除项目时，我需要添加淡入淡出效果。你们能帮帮一个程序员吗？谢谢

【问题讨论】：

如果您通过ng-show hide 隐藏数据，那么这是不可能的，因为它遵循display block 和none 属性，没有动画在其上起作用，为此您需要使用@987654328 之类的属性@ 和 visibility:hidden 可用于任何类型的动画。
Angular 4 animation for fade in and out a view的可能重复

标签： html css angular

【解决方案1】：

这是stackblitz demo

我在这里使用了动画，并为您的删除功能添加了超时。要使用它，您还需要在模块中导入“BrowserAnimationsModule”。

import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

您将在演示中看到您实际上可以使用此代码指定多个状态，因此您也可以开始使用活动行和其他内容。

我把你的 ngFor 改成了

<tr *ngFor="let data of selectedItem; let element" [@deleteItem]="element == deletedElement ? 'collapsed' : 'expanded'">

并在顶部添加动画

    @Component({
      selector: 'my-app',
      templateUrl: './app.component.html',
      styleUrls: [ './app.component.css' ],
      animations: [
        trigger('deleteItem', [
          state('expanded', style({ height: '*', /*display: 'block',*/ color:'black' })),
          state('collapsed', style({ height: '0px', maxHeight: '0', display: 'none', color: 'white' })),
          transition('expanded <=> collapsed', [animate('1000ms cubic-bezier(0.4, 0.0, 0.2, 1)')]),
        ]),
      ],
    })

当你使用材料表时，你可以使用“显示块”部分，然后行向上折叠，我假设你可以对表行做类似的事情，但我没有做那么多详细。

更多信息我想参考the docs

【讨论】：

【解决方案2】：

import { trigger, state, style, animate, transition } from '@angular/animations';

将以下内容添加到组件装饰器数据中：

@Component({
...
animations: [
  trigger('fadeInOut', [
  state('void', style({
    opacity: 0
  })), //Not sure if this init state is necessary here, please leave a comment and I edit this answer.
  transition(':enter', [
    style({ opacity: '0' }),
    animate('0.5s 300ms ease-in', style({ opacity: '1' }))
  ]),
  transition(':leave', [
    style({ opacity: '1' })
    animate('0.3s ease-out', style({ opacity: '0' }))
  ])
])]
...
})

现在您可以使用[@fadeInOut] 扩展您的模板。

<tr *ngFor="let data of selectedItem" [@fadeInOut]>

类似这样...我没有测试我的代码。

【讨论】：