honeymoose
/
angular-cn
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

perf(animations): do not place enterId values on elements for querying purposes (#17150)

This commit is contained in:
Matias Niemelä 2017-06-01 11:39:53 -07:00 committed by Victor Berchet
parent 230255f887
commit ad6a57e0a3
1 changed files with 4 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
packages/animations/browser/src/render/transition_animation_engine.ts
View File

@ -19,7 +19,6 @@ import {AnimationDriver} from './animation_driver';
import {getOrSetAsInMap, listenOnPlayer, makeAnimationEvent, normalizeKeyframes, optimizeGroupPlayer} from './shared'; import {getOrSetAsInMap, listenOnPlayer, makeAnimationEvent, normalizeKeyframes, optimizeGroupPlayer} from './shared';
const EMPTY_PLAYER_ARRAY: AnimationPlayer[] = []; const EMPTY_PLAYER_ARRAY: AnimationPlayer[] = [];
const ANIMATE_EPOCH_ATTR = 'ng-animate-id';
interface TriggerListener { interface TriggerListener {
name: string; name: string;
@ -454,7 +453,6 @@ export class TransitionAnimationEngine {
public statesByElement = new Map<any, {[triggerName: string]: StateValue}>(); public statesByElement = new Map<any, {[triggerName: string]: StateValue}>();
public totalAnimations = 0; public totalAnimations = 0;
public totalQueuedPlayers = 0; public totalQueuedPlayers = 0;
public currentEpochId = 0;
private _namespaceLookup: {[id: string]: AnimationTransitionNamespace} = {}; private _namespaceLookup: {[id: string]: AnimationTransitionNamespace} = {};
private _namespaceList: AnimationTransitionNamespace[] = []; private _namespaceList: AnimationTransitionNamespace[] = [];
@ -462,6 +460,7 @@ export class TransitionAnimationEngine {
private _whenQuietFns: (() => any)[] = []; private _whenQuietFns: (() => any)[] = [];
public namespacesByHostElement = new Map<any, AnimationTransitionNamespace>(); public namespacesByHostElement = new Map<any, AnimationTransitionNamespace>();
public collectedElements: any[] = [];
// this method is designed to be overridden by the code that uses this engine // this method is designed to be overridden by the code that uses this engine
public onRemovalComplete = (element: any, context: any) => {}; public onRemovalComplete = (element: any, context: any) => {};
@ -590,10 +589,7 @@ export class TransitionAnimationEngine {
} }
} }
updateElementEpoch(element: any, isRemoval?: boolean) { updateElementEpoch(element: any, isRemoval?: boolean) { this.collectedElements.push(element); }
const epoch = (isRemoval ? -1 : 1) * this.currentEpochId;
setAttribute(element, ANIMATE_EPOCH_ATTR, epoch);
}
markElementAsRemoved(element: any, unmark?: boolean) { markElementAsRemoved(element: any, unmark?: boolean) {
if (unmark) { if (unmark) {
@ -679,6 +675,7 @@ export class TransitionAnimationEngine {
} }
this.totalQueuedPlayers = 0; this.totalQueuedPlayers = 0;
this.collectedElements = [];
this.queuedRemovals.clear(); this.queuedRemovals.clear();
this._flushFns.forEach(fn => fn()); this._flushFns.forEach(fn => fn());
this._flushFns = []; this._flushFns = [];
@ -696,8 +693,6 @@ export class TransitionAnimationEngine {
quietFns.forEach(fn => fn()); quietFns.forEach(fn => fn());
} }
} }
this.currentEpochId++;
} }
private _flushAnimations(microtaskId: number): TransitionAnimationPlayer[] { private _flushAnimations(microtaskId: number): TransitionAnimationPlayer[] {
@ -713,8 +708,7 @@ export class TransitionAnimationEngine {
// the :enter queries match the elements (since the timeline queries // the :enter queries match the elements (since the timeline queries
// are fired during instruction building). // are fired during instruction building).
const bodyNode = getBodyNode(); const bodyNode = getBodyNode();
const allEnterNodes: any[] = const allEnterNodes: any[] = this.collectedElements;
bodyNode ? this.driver.query(bodyNode, makeEpochSelector(this.currentEpochId), true) : [];
const enterNodes: any[] = const enterNodes: any[] =
allEnterNodes.length ? collectEnterElements(this.driver, allEnterNodes) : []; allEnterNodes.length ? collectEnterElements(this.driver, allEnterNodes) : [];
@ -1321,8 +1315,3 @@ function getBodyNode(): any|null {
} }
return null; return null;
} }
function makeEpochSelector(epochId: number, isRemoval?: boolean) {
const value = (isRemoval ? -1 : 1) * epochId;
return `[${ANIMATE_EPOCH_ATTR}="${value}"]`;
}