chore(*): Use animationend.

Author: MKirova

projects/igniteui-angular/src/lib/grids/grid/grid-add-row.spec.ts

@@ -32,8 +32,8 @@ describe('IgxGrid - Row Adding #grid', () => {
     const endTransition = () => {
           // transition end needs to be simulated
           const animationElem = fixture.nativeElement.querySelector('.igx-grid__tr--inner');
-          const transitionEvent = new TransitionEvent('transitionend');
-          animationElem.dispatchEvent(transitionEvent);
+          const endEvent = new AnimationEvent('animationend');
+          animationElem.dispatchEvent(endEvent);
     };
     configureTestSuite();
     beforeAll( async(() => {

projects/igniteui-angular/src/lib/grids/grid/grid-row.component.html

@@ -2,7 +2,7 @@
  <ng-container *ngTemplateOutlet='addRow ? addTemp : defaultTemp'></ng-container>
 
 <ng-template #addTemp>
-    <div class='igx-grid__tr--inner' [class.igx-grid__tr--add-animate]='animateAdd' (webkitAnimationEnd)='animationEndHandler()' (transitionend)='animationEndHandler()'>
+    <div class='igx-grid__tr--inner' [class.igx-grid__tr--add-animate]='animateAdd' (animationend)='animationEndHandler()'>
         <ng-container *ngTemplateOutlet='defaultTemp'></ng-container>
     </div>
 </ng-template>

projects/igniteui-angular/src/lib/grids/hierarchical-grid/hierarchical-grid-add-row.spec.ts

@@ -14,8 +14,8 @@ describe('IgxHierarchicalGrid - Add Row UI #tGrid', () => {
     const endTransition = () => {
         // transition end needs to be simulated
         const animationElem = fixture.nativeElement.querySelector('.igx-grid__tr--inner');
-        const transitionEvent = new TransitionEvent('transitionend');
-        animationElem.dispatchEvent(transitionEvent);
+        const endEvent = new AnimationEvent('animationend');
+        animationElem.dispatchEvent(endEvent);
   };
     beforeAll(async(() => {
         TestBed.configureTestingModule({

projects/igniteui-angular/src/lib/grids/hierarchical-grid/hierarchical-row.component.html

@@ -13,7 +13,7 @@
 </ng-template>
 
 <ng-template #addTemp>
-    <div class='igx-grid__tr--inner' [class.igx-grid__tr--add-animate]='animateAdd' (webkitAnimationEnd)='animationEndHandler()' (transitionend)='animationEndHandler()'>
+    <div class='igx-grid__tr--inner' [class.igx-grid__tr--add-animate]='animateAdd' (animationend)='animationEndHandler()'>
         <ng-container *ngTemplateOutlet='defaultTemp'></ng-container>
     </div>
 </ng-template>

projects/igniteui-angular/src/lib/grids/tree-grid/tree-grid-add-row-ui.spec.ts

@@ -18,8 +18,8 @@ describe('IgxTreeGrid - Add Row UI #tGrid', () => {
     const endTransition = () => {
         // transition end needs to be simulated
         const animationElem = fix.nativeElement.querySelector('.igx-grid__tr--inner');
-        const transitionEvent = new TransitionEvent('transitionend');
-        animationElem.dispatchEvent(transitionEvent);
+        const endEvent = new AnimationEvent('animationend');
+        animationElem.dispatchEvent(endEvent);
   };
     beforeAll(async(() => {
         TestBed.configureTestingModule({

projects/igniteui-angular/src/lib/grids/tree-grid/tree-grid-row.component.html

@@ -1,7 +1,7 @@
 <ng-container *ngTemplateOutlet='addRow ? addTemp : defaultTemp'></ng-container>
 
 <ng-template #addTemp>
-    <div class='igx-grid__tr--inner' [class.igx-grid__tr--add-animate]='animateAdd' (webkitAnimationEnd)='animationEndHandler()' (transitionend)='animationEndHandler()'>
+    <div class='igx-grid__tr--inner' [class.igx-grid__tr--add-animate]='animateAdd' (animationend)='animationEndHandler()'>
         <ng-container *ngTemplateOutlet='defaultTemp'></ng-container>
     </div>
 </ng-template>