Open yched opened 1 year ago
Yeah, I'm stupid - of course, setting flipKey
to any constant value will prevent subsequent animations :sweat_smile:
Not the discovery of the century, but I guess maybe it could still be a bit more explicit in the doc that it's a trick that can be used to disable animations ?
Also, I had to take extra steps so that this "constant flipKey
value"(e.g false
) is in place before any change in the order happens.
Otherwise, going from " items 1,2,3" to "items 2,3,1 but do not animate please" means flipKey
changing from '1-2-3'
to false
, and thus would still trigger an animation.
Thus, maybe it would be handy to have a separate disableFlip
boolean prop, that would disable animations regardless of whether flipKey has changed ?
Hey, thanks for bringing up this use case. It seems like it could be fairly common. An alternate solution is to use the shouldFlip
method on the Flipped
component to return false
, though depending on how many Flipped
components you're rendering that could get annoying.
I will definitely consider adding a shouldFlip
prop to the parent Flipper
component as you suggest.
Using shouldFlip does seem to work, but has the drawback of needing to apply the prop in each item, and they can be located at an arbitrary depth lower in the React tree.
Also, not sure it fully works when adding to that mix inversed Flipped and items having their own nested Flipper-enabled list, I'm still seeing some stray animations at the beginiing of my drag-n-drop operaions even after setting shouldFlip = () => !dragnDropOngoing
A single killswitch at the Flipper level sounds easier indeed :+1:
A shouldFlip
or disabled
prop at the Flipper level would be great. It’s needed for accessibility to support users who prefers-reduced-motion
Hey @jlarmstrongiv, thanks for raising that. I just made a quick release to make sure no animations occur when the user has prefers-reduced-motion
on: https://github.com/aholachek/react-flip-toolkit/releases/tag/v7.1.0
Thank you @aholachek 😄
I needed to temporarily disable flip animations based on certain conditions (namely, my flip-enabled list is drag-n-drop reorderable, and the animations are a bit jarring when the user is dragging an item from one place to another).
I struggled a bit to find a way to do that (tried removing the
<Flipped>
wrappers around each item altogether, which was very inefficient of course: full remounting of the whole react tree below the list, noticeable lag on large lists), before finding out that setting flipKey to null (or better, false) does exactly what I wantedTurns out the flipKey prop is indeed documented as "required, string | number | bool", but the effect of setting to false (or true, for that matter ?) is not clearly explained.
Other than that, thanks a ton for the package !