Releases: joshwcomeau/react-flip-move
v2.4.0
Add prop getPosition()
For calculating position, FlipMove uses getBoundingClientRect
. This method provides the top/left/right/bottom positions of the element relative to the viewport, and it's how FlipMove figures out where stuff needs to be moved to.
Unfortunately, it fails in certain situations (eg. inside a scaled container).
This prop allows you to specify a custom function to be used instead of getBoundingClientRect
. It accepts the DOM node as an argument and should return an object with top/left/right/bottom and width/height properties.
It is unlikely to be needed by most users, but a good escape hatch to have when those situations come up :)
Huge props to @Guuz for his work implementing this feature.
v2.3.0
Delegated HTML attributes
FlipMove creates a wrapping component over the children supplied, and this component has been notoriously hard to tweak. I added className
and style
props for people to specify those specific attributes, but others have wanted much more control over the wrapping node.
This feature separates all non-FlipMove props into a delegatedProps
object, and applies those attributes directly to the created DOM node.
This means that you can pass any prop you want to <FlipMove />
, and it'll be transferred over to the new node :)
Closes #50
v2.2.1
Band-aid Fix for BoundingBox cache
In certain circumstances, it appears bounding boxes weren't being stored correctly in the object used to remember prior positions. While I'd like to properly hunt down the bug in the future, for now I'm releasing a "quick fix" that solves the problem by supplying a default, placeholder box when none is found.
This solution appears to work, but this is addressing the symptom, not the cause. Better fix to come!
v2.2.0
v2.1.4
v2.1.3
Bug fix with children not being removed
In #38, @DiogoDoreto found several cases in which children that were removed from the state were not being removed from the DOM. This patch addresses two of them:
- When
disableAllAnimations
is set totrue
, - When using legacy browsers that do not support CSS transitions.
v2.1.2
Fix bug with nested transitions
Since its inception, FlipMove has relied on an onTransitionEnd
event handler to do some post-flipping cleanup. Specifically, I needed to remove some inline styles (transform, transition) and fire user-specified onFinish handlers.
This works great, except when a nested node also has a transition event, such as a :hover
effect.
The problem is, events bubble up. This propagation causes the onTransitionEnd handler to fire prematurely, which causes the parent node to "jump" to its end position pre-maturely, as the cleanup removes the styles that are currently controlling its transition!
Props to @havenchyk for spotting the issue and helping me diagnose with a Codepen :)
v2.0.6
Bug fix: Support enter/leave animations in Internet Explorer 10
Very small change, to support IE10.
With this bug fix, I believe v2.0.6 has the same compatibility as v1.x. IE 10+, Edge, Chrome, Firefox, Safari, mobile safari and mobile chrome all tested and working.
v2.0.5
Allow Leave animations to be disabled
Fixed a bug in which Leave animations, when disabled, were causing the exiting nodes to stick around until the next state update.
v2.0.4
Bug fix: Support enter/leave animations in Firefox
So, when you use window.getComputedStyle
properly, there aren't any browser inconsistencies relating to property names. When you treat it as a regular object, though, and try to clone it, it exposes the internal property names, and these props differ between Firefox and Chrome.
This bugfix uses the API properly, enabling enter/leave to work in FF.