v2.0.3

Bug fix for inline-block elements

The details of this bug fix are pretty hairy, so suffice it to say that inline-block elements will now be animated property.

v2.0.2

Version 2.0.2

Note: This is the first release in the 2.x series. The version is 2 patches higher than it ought to be, because NPM is a harsh mistress that does not allow mistakes to be corrected.

Enter/Leave Animations

The big news with this release is enter/leave animations. Tons of information about how they work is available in the README. Enjoy!

Breaking Changes

• Enter/leave animations are enabled by default, which means after upgrading, the items will behave differently. If you don't want enter/leave animations, you can pass false as a prop to enterAnimation and leaveAnimation.
• disableAnimations has been renamed to disableAllAnimations. The property is still enabled, but a deprecation warning will trigger
• Maybe more? This was a significant change. While enter/leave animations sound simple, they are in fact incredibly complex; the codebase doubled in size, from ~200 lines of code to 400. There may be weird side effects, as a result.

Please let me know if anyone encounters any issues!

Happy flipping :D

v1.4.1

Add support for React 0.13

It occurred to me that I was specifying, via peerDependencies, that only React 0.14+ was eligible. While 0.12 and below are different enough to make it a challenge to support, 0.13 is similar enough that no change was necessary for support.

Hopefully this helps those still rocking with 0.13!

v1.4.0

Add disableAnimations property

Previously, Flip Move was "always on". There was no easy way to temporarily suspend animations. This release allows you to specify a disableAnimations property.

Also took the opportunity to implement the same behaviour when duration, delay, and staggered duration/delay are all 0. Previously, doing so would cause a weird flicker in certain browsers.

v1.3.1

Add support for React 15

Updated the dependencies to play nicely with the React 15 Release Candidates.

v1.3.0

Add onFinishAll handler

Added a new API method, onFinishAll. Fires at the end of all animations, instead of firing once per item.

v1.2.0

Add support for nested Flip Moves

Prior to this change, Flip Moves could not be nested without some wonky effects. This release changes an implementation detail that allows them to be nested (so, for example, groups of lists of items can be re-ordered, as can the items in the lists).

Props to @IamNotUrKitty for finding a better way to implement this functionality :)

v1.1.1

Fix perf issue with onFinish callbacks

Internally, to fire a provided onFinish callback, I was binding a listener to the transitionEnd event. Negligently, I forgot to un-bind that listener once the transition completed!

This means that each animation incremented the number of times the onFInish callback was executed - not good at all.

Credit to @IamNotUrKitty to finding, testing, and fixing the issue =D

v1.1.0

Add custom class and type to <FlipMove> component.

className

When you wrap your children in a <FlipMove> component, a <div> element gets created in its place.

If you're using a grid system like the ones in Foundation or Bootstrap, this is problematic! You need a row class to be appended to that container.

By using the new className prop on <FlipMove>, you can specify which class(es) need to be copied to the wrapper.

typeName

There are times when you might wish for the <FlipMove> wrapper to be a specific HTML element (for example, a <ul> if your children are all <li>s.

The new typeName prop allows you to pass any valid HTML element name ("ul", "section", "a", etc) to be used instead of a <div> to wrap the children.

Note that interesting things may happen if you don't use block elements (or apply block styling with display: block)

v1.0.5

Implement higher-order component for prop preparation.

Refactored FlipMove so that all prop-related logic (and there's a lot of it, with this module) lives in a higher-order component. This logic is crucial, but very uninteresting. By moving it out of the core component, the logic of the component becomes much cleaner and easy to reason about.

It also improves the performance of the module; because props are immutable within a component, the type conversion needed to happen several times, in different lifecycle components. React.Children.toArray was being called 3 times; now it's being called once.

Full list of changes:

• duration, delay, staggerDurationBy, and staggerDelayBy can either be numbers or strings. The higher-order component converts them to integers, and warns if an invalid value was provided.
• Converted single children to an array, so that they could be iterated over.
• Moved propTypes and defaultProps to the new higher-order component.