这是我的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() 方法来完成这项工作。 从表中删除元素时，我需要添加淡入淡出效果。 你们能帮帮程序员吗？谢谢<3
最佳答案
这是一个 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)')]),
]),
],
})
当你使用 Material 表时，你可以使用“显示 block ”部分，然后行向上折叠，我假设你可以对表行做类似的事情，但我没有做那么多详细介绍。
有关更多信息，我想引用 the docs
关于html - 在 Angular 中删除元素时如何添加淡入淡出的动画效果？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/59029403/