bug: progressEnd callback fires after user callbacks

[liamdebeasi]

Prerequisites

• I have read the Contributing Guidelines.
• I agree to follow the Code of Conduct.
• I have searched for existing issues that already report this problem, without success.

Ionic Framework Version

v6.x, v7.x

Current Behavior

The internal onFinish callback set at the end of a gesture in progressEnd can incorrectly fire after user onFinish callbacks fire: https://github.com/ionic-team/ionic-framework/blob/331c08aad542de158e53ed351705d4c396bb4e90/core/src/utils/animation/animation.ts#L830C4-L837

If a user chooses to update the keyframes in an onFinish callback this can cause the direction to be incorrect because we force the duration to either normal or reverse for progressEnd. This forced value allows us to play the animation to either the beginning or the end when a gesture ends (for example, the card modal can either be swiped to close or swipe and then bounce back to its opened state). We clear that forced value, but since the callback that does so runs after the user callback, it's possible to get a stale direction state.

Expected Behavior

I expect any internal value coercions to be reset when the animation ends before any user code runs.

Steps to Reproduce

1. Open https://stackblitz.com/edit/angular-bux16w?file=src%2Fapp%2Fexample.component.ts
2. Open the console.
3. Drag the card along the track and then release it. The card will animate back to the beginning.
4. Observe that when the user onFinish callback fires the direction is registered as "reverse" but it is registered as "normal" if run in a setTimeout.

---

The negative impact this has can be seen in the following reproduction:

1. Open https://stackblitz.com/edit/angular-bux16w-ucfalw?file=src%2Fapp%2Fexample.component.ts
2. Drag the card along the track and then release it. The card will animation back to the beginning and then update its keyframes to animate the background from green to red.
3. Observe that when we call progressStart(true, 0) this jumps the animation back to the beginning. However, since the animation's direction is still forced to "reverse" the card shows red since that keyframe is technically the first keyframe now.
4. Observe that calling progressStart again after a delay (see the setTimeout) the animation correctly jumps to the green keyframe since the coerced direction has been reset.

Screen.Recording.2023-10-20.at.4.24.30.PM.mov

Code Reproduction URL

No response

Ionic Info

N/A

Additional Information

No response

[liamdebeasi]

Fixed in #28394.

[ionitron-bot]

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.