Skip to content

Releases: joshwcomeau/react-flip-move

v2.4.0

17 Jun 11:36
Compare
Choose a tag to compare

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

29 May 12:50
Compare
Choose a tag to compare

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

29 May 12:45
Compare
Choose a tag to compare

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

06 May 12:28
Compare
Choose a tag to compare

Add onStartAll callback

Symmetry has been achieved! Now, there's an onStartAll hook, similar to onFinishAll. It's invoked right before the animation begins, applied to an array of the ReactElements being animated and an array of the DOM nodes being animated.

Closes #41

v2.1.4

06 May 12:10
Compare
Choose a tag to compare

Fix bug with children not being removed in Firefox

This release addresses a second part to the issue discussed in #38 - specifically, this fix stops relying on an outdated IE property ev.srcElement, in favour of the much more standardized ev.target.

v2.1.3

06 May 11:59
Compare
Choose a tag to compare

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 to true,
  • When using legacy browsers that do not support CSS transitions.

v2.1.2

28 Apr 01:23
Compare
Choose a tag to compare

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

13 Apr 01:39
Compare
Choose a tag to compare

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

12 Apr 17:01
Compare
Choose a tag to compare

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

12 Apr 17:00
Compare
Choose a tag to compare

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.