fix: Prevent drag handle arrow button flicker on exit animation

[johannes-weber]

Description

This change addresses a UX issue where buttons briefly reappeared after their exit animation, causing an unwanted flicker effect (reported in cloudscape-design/board-components#356 (comment)). By retaining the final keyframe state, we create a smoother transition without disrupting the intended hide behavior.

Before this change: When the exit animation completes, the element briefly reverts to its original state before being hidden. This happens because by default, CSS animations reset to their pre-animation state once completed (see MDN docs for animation-fill-mode). The specific animation sequence behavior before this change:

1. Initial state (buttons visible)
2. Exit animation runs (fade out + transform)
3. Animation completes
4. Element briefly reverts to original state (visible)
5. Element is finally hidden

before.mov

The animation sequence after this change:

1. Initial state (buttons visible)
2. Exit animation runs (fade out + transform)
3. Animation completes
4. Final keyframe state is retained (faded out + transformed)
5. Element is finally hidden

after.mov

Related links, issue #, if available: AWSUI-60240

How has this been tested?

• Tested on FF, Safari and Chrome on the board component.

Review checklist

The following items are to be evaluated by the author(s) and the reviewer(s).

Correctness

• Changes include appropriate documentation updates.
• Changes are backward-compatible if not indicated, see CONTRIBUTING.md.
• Changes do not include unsupported browser features, see CONTRIBUTING.md.
• Changes were manually tested for accessibility, see accessibility guidelines.

Security

• If the code handles URLs: all URLs are validated through the checkSafeUrl function.

Testing

• Changes are covered with new/existing unit tests?
• Changes are covered with new/existing integration tests?

---

By submitting this pull request, I confirm that you can use, modify, copy, and redistribute this contribution, under the terms of your choice.

[codecov]

Codecov Report

All modified and coverable lines are covered by tests ✅

Project coverage is 96.54%. Comparing base (8565ca4) to head (6a5d31b).
Report is 3 commits behind head on main.

Additional details and impacted files

@@           Coverage Diff           @@
##             main    #3543   +/-   ##
=======================================
  Coverage   96.54%   96.54%           
=======================================
  Files         804      804           
  Lines       23434    23434           
  Branches     7748     7748           
=======================================
  Hits        22625    22625           
  Misses        802      802           
  Partials        7        7           

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:

• ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
• 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.