ng-leave removes the item when transition of a child element is finished

[bzzz-dmg]

I'm submitting a ...

• bug report
• feature request
• other (Please do not submit support requests here (see above))

Current behavior:

ng-leave removes item too early, when some of the child elements finishes its transition

Expected / new behavior:

Items are not removed before ng-leave transition is finished.

Minimal reproduction of the problem with instructions:

Demo: https://plnkr.co/edit/pwDJA6s6ZJvfeJKiRjWk?p=preview
In the first list items are removed only after child transition is finished, so it works as expected.
In the second list items are removed a bit earlier so that child transition ends before ng-leave transition which leads to termination of ng-leave transition and removes the item.

Here is a workaround for this particular problem: https://plnkr.co/edit/0Xwe0JWfx5wmVRfDJi2i?p=preview
It cancels transition of child element, but it have to work without such hacks.

AngularJS version: 1.6.6

Browser: [Chromium 60 | Chrome 60 | Firefox 55]

Anything else:

I'm not sure how it works exactly, but transition time should probably be determined only on the item ng-leave is applied on, not anything else.

[Narretz]

Hi,
thanks for the report.
I think the problem is that our transitionend event listener does not work correctly when the event is coming from a child element. (

angular.js/src/ngAnimate/animateCss.js

Lines 804 to 829 in 3651e42

	function onAnimationProgress(event) {
	event.stopPropagation();
	var ev = event.originalEvent || event;
	// we now always use `Date.now()` due to the recent changes with
	// event.timeStamp in Firefox, Webkit and Chrome (see #13494 for more info)
	var timeStamp = ev.$manualTimeStamp || Date.now();
	/* Firefox (or possibly just Gecko) likes to not round values up
	* when a ms measurement is used for the animation */
	var elapsedTime = parseFloat(ev.elapsedTime.toFixed(ELAPSED_TIME_MAX_DECIMAL_PLACES));
	/* $manualTimeStamp is a mocked timeStamp value which is set
	* within browserTrigger(). This is only here so that tests can
	* mock animations properly. Real events fallback to event.timeStamp,
	* or, if they don't, then a timeStamp is automatically created for them.
	* We're checking to see if the timeStamp surpasses the expected delay,
	* but we're using elapsedTime instead of the timeStamp on the 2nd
	* pre-condition since animationPauseds sometimes close off early */
	if (Math.max(timeStamp - startTime, 0) >= maxDelayTime && elapsedTime >= maxDuration) {
	// we set this flag to ensure that if the transition is paused then, when resumed,
	// the animation will automatically close itself since transitions cannot be paused.
	animationCompleted = true;
	close();
	}
	}

) I think we should simply ignore all of the event in this case. I'll work on a test case and PR.

[Narretz]

Here's a plunker with a fix: https://plnkr.co/edit/nKU8lkiwVI6kphL99G6J?p=preview
And here's the PR #16214

[bzzz-dmg]

Looks good, thank you.

[Narretz]

Fix will be in the 1.6.7 release (commit 1391e99)