[BUG] Styles set using CSS rules are overridden by inline styles after transition exited

[233mawile]

1. Read the FAQs 👇

2. Describe the bug

The inline styles that created by framer-motion are alaways keeped on dom even through transition exited. This will cause styles cannot be changed by css rule after transition.

3. IMPORTANT: Provide a CodeSandbox reproduction of the bug

https://codesandbox.io/s/framer-motion-inline-css-bug-su6e1p

4. Steps to reproduce

1. hover bug button
2. Click on disable button ⬆️ button
3. bg color of bug button is not changed

5. Expected behavior

bg color of bug button should be changed to grey

6. Video or screenshots

2022-08-15.20.56.07.mov

7. Environment details

chrome: Version 104.0.5112.79 (Official Build) (arm64)
OS: MacOS 12.4

[mattgperry]

Once values are handled by Framer Motion, they'll continue to take priority of CSS. Doing it any other way is impractical.

Consider this specific interaction. We can safely read the initial value out of the DOM because we haven't yet applied styles. To animate back from this whileHover style to CSS we'd need to unapply the style (a DOM write), read the computed style (DOM read) and then animate to that (a write). This is not performant, some kind of batching approach could be taken but I don't think the overhead is worth it.

An alternative would be to delete the style once the animation has finished and there's no other - this could easily result in a visual switch from the value we thought we should be animating to, to the actual latest underlying style, which is also not ideal. This latter approach is much more feasible but looking at the linked dupe with Reorder would definitely impact that example negatively.