How to add a fading animation effect when a item is deleted in Angular?

Question

This is my html file

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

This is the delete function which I have coded

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

    })
  }

I have just posted the partial code section from the componenet.ts file. I have added a deleteFromCart() method which does the job. I need to add a fade effect when an item is deleted from the table. Could you guys help out a fellow programmer? Thanks <3

Answer 1

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

Add the following into the component decorator data:

@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' }))
  ])
])]
...
})

And now you can extend your template with [@fadeInOut] .

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

Something like this... I did not test my code.

Answer 2

Here's a stackblitz demo

I used animations here and added a timeout to your delete function. To use this you also need to import 'BrowserAnimationsModule' in your module.

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

You'll see in the demo you can actually appoint multiple states with this code, so you can start using active rows and other stuff as well with this.

I changed your ngFor to

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

And added animations to the top

    @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)')]),
        ]),
      ],
    })

When you use material tables you can use the 'display block' part and then the row collapses upwards, I'd assume you'd be able to do something similar with table-rows, but I didn't go that much into detail.

For more info I'd like to reference to the docs

How to add a fading animation effect when a item is deleted in Angular?

Question

2 answers

solution1
0 2019-11-25 10:24:51

solution2
0 2019-11-25 11:26:24

How to add a fading animation effect when a item is deleted in Angular?

Question

2 answers

solution1 0 2019-11-25 10:24:51

solution2 0 2019-11-25 11:26:24

solution1
0 2019-11-25 10:24:51

solution2
0 2019-11-25 11:26:24