diff --git a/nativescript-angular/animations/animation-engine.ts b/nativescript-angular/animations/animation-engine.ts index fe29f4ac2..051843be6 100644 --- 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 (this)._buildPlayer(element, timelineInstruction, previousPlayers); + return (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)._eachChildView(child => { - if (cssClasses(child).get(MARKED_FOR_ANIMATION)) { + if (cssClasses(child).get(MARKED_FOR_ANIMATION_SELECTOR)) { elms.push(child); } @@ -129,8 +130,8 @@ export class NativeScriptAnimationEngine extends DomAnimationEngine { (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 index 0cb1e3476..c11607a43 100644 --- 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; diff --git a/nativescript-angular/view-util.ts b/nativescript-angular/view-util.ts index 6328650aa..dfccc2ae2 100644 --- 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 index b3d2181ee..88472109e 100644 --- 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 = new Map();