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

sis0k0 · web-flow · commit bcde968fbd3d · 2017-03-27T15:40:34.000+03:00
this is required because of checks in DomAnimationEngine Caused by: angular/angular@80075af
diff --git a/nativescript-angular/animations/animation-engine.ts b/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 = [];
         (<any>element)._eachChildView(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) {
diff --git a/nativescript-angular/element-registry.ts b/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>;
diff --git a/nativescript-angular/view-util.ts b/nativescript-angular/view-util.ts
@@ -17,6 +17,7 @@ import { platformNames, Device } from "platform";
 import { rendererLog as traceLog, styleError } from "./trace";
 
 const XML_ATTRIBUTES = Object.freeze(["style", "rows", "columns", "fontAttributes"]);
+const ELEMENT_NODE_TYPE = 1;
 const whiteSpaceSplitter = /\s+/;
 
 export type ViewExtensions = ViewExtensions;
@@ -144,6 +145,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;
     }
 
diff --git a/tests/app/tests/property-sets.ts b/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>();

Original file line number	Diff line number	Diff line change
`@@ -9,6 +9,7 @@ export interface ViewClassMeta {`
`9`	`9`	`}`
`10`	`10`
`11`	`11`	`export interface ViewExtensions {`
	`12`	`+ nodeType: number;`
`12`	`13`	`nodeName: string;`
`13`	`14`	`templateParent: NgView;`
`14`	`15`	`ngCssClasses: Map<string, boolean>;`