fix(panel): append panel animation transforms after existing transforms

[Noglen]

append the transform for panel animations after any existing transforms. Previously, the animation
transform was appened first, resulting in the destination location being incorrect.

PR Checklist

Please check that your PR fulfills the following requirements:

• The commit message follows our guidelines
• Tests for the changes have been added or this is not a bug fix / enhancement
• Docs have been added, updated, or were not required

PR Type

What kind of change does this PR introduce?

[x] Bugfix
[ ] Enhancement
[ ] Documentation content changes
[ ] Code style update (formatting, local variables)
[ ] Refactoring (no functional changes, no api changes)
[ ] Build related changes
[ ] CI related changes
[ ] Infrastructure changes
[ ] Other... Please describe:

What is the current behavior?

When a panel has a centered location (or other transform applied) combined with an OpenFrom/CloseTo, the panel animates to/from the wrong location

Issue Number:
N/A

What is the new behavior?

The panel animates to/from the correct location

Does this PR introduce a breaking change?

[ ] Yes
[x] No

Other information

[Splaktar]

Since there is no associated issue and thus no associated demo, can you please provide a CodePen demo that reproduces the issue being fixed here? Or point to a demo on the docs site that reproduces the issue?

[Splaktar]

Can you please investigate adding some unit testing coverage for this change?

[Noglen]

Here's a CodePen that shows the issue. Its the panel animations from the doco - but with the panel position set to .center() instead of .right().top();

https://codepen.io/noglen/pen/qwBMOx

[Splaktar]

I've tested this manually and I can see that the changes to scale really work, but I'm not able to see any visual difference when using slide.

Do you have some reproduction steps for me to verify the changes to slide?

[Splaktar]

For future testing reference

• My updated CodePen that shows the problem
• My CodePen with the fix from this branch

[Splaktar]

@Noglen I just wanted to remind you that I'm still waiting on a response to my previous comment in #11681 (review).

[Noglen]

@Noglen I just wanted to remind you that I'm still waiting on a response to my previous comment in #11681 (review).

Sorry about that.

I've had another look over it gain and can't repo the problem with slide, so i'm gussing it was something else I had in my project that was causing the issue.

Do you think I should revert back the change for slide, or leave the change so that it is consistant with scale?

I'll try and get some unit tests added in today aswell.

[Splaktar]

Yeah, let's revert the changes to slide until we can isolate a reproduction. That should reduce the risk that this causes any issues or has problems with the presubmit process.

OK, thank you for looking into adding the unit tests!

[Noglen]

reverted the change to slide

unit tests were a bit tricky since it's the browser's rending of the CSS that causes the problem with the position (since the order of operations in transform actually matters), not the actual position calc in code - so ended up just checking that the scale transform is added after the existing transform

[Splaktar]

LGTM