React-spring: Not mentioned breaking change v8 -> v9.0.0-rc3. All animation values requires a unit even for 0.
馃悰 Bug Report
Upgrading from v8 to v9.0.0-rc3 breaks animations (at least for useTransition) in situations where animation phase values do not specify a unit. Version 8 does not require a unit for value 0 (for example translateX(0)) and I think it was the correct behavior. Version 9 does not animate the value missing a unit and no console error or warning appears.
To Reproduce
Steps to reproduce the behavior:
See this example: https://codesandbox.io/s/react-spring900-rc3-usetransition-issue-5thj7
Click the button and wait until the animation is finished. The element will move from right to left and sets its opacity to 1. Then click again, the element should move back to the right but it only disappears thanks to opacity animation to 0.
The reason is missing symbol % in useTransition enter phase, property transform.
Expected behavior
Value 0 should not need to have a unit
OR
an error in the console should appear and the requirement should be listed in breaking changes.
Environment
react-springv9.0.0-rc3reactv16
RichardJuchelka
>All comments
The string interpolation logic is generic in that it extracts the numbers, animates them, and reinserts them into the "from value" as a template of sorts. This leads to issues like yours, where react-spring doesn't have the context to understand what you're trying to do. #1049 is tracking this.
Both v8 and v9 are unable to animate from translateX(0) to translateX(100%), because translateX(0) is used as the template. The reverse works, because then translateX(100%) is used as the template. This bug exists in both v8 and v9.
v8: https://codesandbox.io/s/react-spring-1159-v8-d3fl5?file=/src/App.js
v9: https://codesandbox.io/s/react-spring-1159-v9-44x2o?file=/src/App.js
One solution would involve adding a new property to the Globals object, so @react-spring/web can inject more context-aware interpolation logic. Ideally, you would be able to animate from any number (not just 0) to/from a percentage (#643).
aleclarson
on 24 Sep 2020
Related issues
Daniel15
路
3Comments
cmmartin
路
3Comments
fortezhuo
路
3Comments
localjo
路
3Comments
VincentCtr
路
3Comments
Most helpful comment
The string interpolation logic is generic in that it extracts the numbers, animates them, and reinserts them into the "from value" as a template of sorts. This leads to issues like yours, where react-spring doesn't have the context to understand what you're trying to do. #1049 is tracking this.
Both v8 and v9 are unable to animate from
translateX(0)totranslateX(100%), becausetranslateX(0)is used as the template. The reverse works, because thentranslateX(100%)is used as the template. This bug exists in both v8 and v9.v8: https://codesandbox.io/s/react-spring-1159-v8-d3fl5?file=/src/App.js
v9: https://codesandbox.io/s/react-spring-1159-v9-44x2o?file=/src/App.js
One solution would involve adding a new property to the
Globalsobject, so@react-spring/webcan inject more context-aware interpolation logic. Ideally, you would be able to animate from any number (not just0) to/from a percentage (#643).