fix(animations): set nodeType 'element' to newly created views (#720)

this is required because of checks in DomAnimationEngine
Caused by: angular/angular@80075af

nativescript-angular/animations/animation-engine.ts

@@ -13,7 +13,8 @@ import {
     setStyles,
 } from "./dom-utils";
 
-const MARKED_FOR_ANIMATION = "ng-animate";
+const MARKED_FOR_ANIMATION_CLASSNAME = "ng-animating";
+const MARKED_FOR_ANIMATION_SELECTOR = ".ng-animating";
 
 interface QueuedAnimationTransitionTuple {
     element: NgView;
@@ -50,9 +51,9 @@ export class NativeScriptAnimationEngine extends DomAnimationEngine {
         // we first run this so that the previous animation player
         // data can be passed into the successive animation players
         let totalTime = 0;
-        const players = instruction.timelines.map(timelineInstruction => {
+        const players = instruction.timelines.map((timelineInstruction, i) => {
             totalTime = Math.max(totalTime, timelineInstruction.totalTime);
-            return (<any>this)._buildPlayer(element, timelineInstruction, previousPlayers);
+            return (<any>this)._buildPlayer(element, timelineInstruction, previousPlayers, i);
         });
 
         previousPlayers.forEach(previousPlayer => previousPlayer.destroy());
@@ -91,7 +92,7 @@ export class NativeScriptAnimationEngine extends DomAnimationEngine {
         // them out by destroying each of them.
         let elms = [];
         element.eachChild(child => {
-            if (cssClasses(<NgView>child).get(MARKED_FOR_ANIMATION)) {
+            if (cssClasses(<NgView>child).get(MARKED_FOR_ANIMATION_SELECTOR)) {
                 elms.push(child);
             }
 
@@ -129,8 +130,8 @@ export class NativeScriptAnimationEngine extends DomAnimationEngine {
         (<any>this)._queuedTransitionAnimations.push(tuple);
         player.init();
 
-        cssClasses(element).set(MARKED_FOR_ANIMATION, true);
-        player.onDone(() => cssClasses(element).set(MARKED_FOR_ANIMATION, false));
+        cssClasses(element).set(MARKED_FOR_ANIMATION_CLASSNAME, true);
+        player.onDone(() => cssClasses(element).set(MARKED_FOR_ANIMATION_CLASSNAME, false));
     }
 
     private _getElementAnimation(element: NgView) {

nativescript-angular/element-registry.ts

@@ -9,6 +9,7 @@ export interface ViewClassMeta {
 }
 
 export interface ViewExtensions {
+    nodeType: number;
     nodeName: string;
     templateParent: NgView;
     ngCssClasses: Map<string, boolean>;

nativescript-angular/view-util.ts

@@ -14,6 +14,7 @@ import { platformNames, Device } from "tns-core-modules/platform";
 import { rendererLog as traceLog } from "./trace";
 
 const XML_ATTRIBUTES = Object.freeze(["style", "rows", "columns", "fontAttributes"]);
+const ELEMENT_NODE_TYPE = 1;
 const whiteSpaceSplitter = /\s+/;
 
 export type ViewExtensions = ViewExtensions;
@@ -141,6 +142,13 @@ export class ViewUtil {
         view.nodeName = name;
         view.meta = getViewMeta(name);
 
+        // we're setting the node type of the view
+        // to 'element' because of checks done in the
+        // dom animation engine:
+        // tslint:disable-next-line:max-line-length
+        // https://github.com/angular/angular/blob/master/packages/animations/browser/src/render/dom_animation_engine.ts#L70-L81
+        view.nodeType = ELEMENT_NODE_TYPE;
+
         return view;
     }
 

tests/app/tests/property-sets.ts

@@ -9,6 +9,7 @@ import {createDevice} from "./test-utils";
 
 class TestView extends View implements ViewExtensions {
     public nodeName: string = "TestView";
+    public nodeType: number = 1;
     public templateParent: NgView = null;
     public meta: ViewClassMeta = { skipAddToDom: false };
     public ngCssClasses: Map<string, boolean> = new Map<string, boolean>();