{description}
{children}Exposes simple components useful for defining entering and exiting transitions. React Transition Group is not an animation library like{' '} React-Motion , it does not animate styles by itself. Instead it exposes transition stages, manages classes and group elements and manipulates the DOM in useful ways, making the implementation of actual visual transitions much easier.
{`
# npm
npm install react-transition-group --save
# yarn
yarn add react-transition-group
`.trim()}
Since react-transition-group is fairly small, the overhead of including the library in your application is negligible. However, in situations where it may be useful to benefit from an external CDN when bundling, link to the following CDN:{' '} https://unpkg.com/react-transition-group/dist/react-transition-group.js
In some situations, like visual snapshot testing, it's helpful to
disable transitions so they don't complicate the test, or introduce
abitrary waits. To make this easier react-transition-group{' '}
exposes a way to globally toggle transitions. When set,{' '}
all transitions, when toggled, will immediately switch
to their entered or exited states as appropriate.
{`
import { config } from 'react-transition-group'
config.disabled = true
`.trim()}
Note: This does not automatically disable animations. It only disabled waits in
Transition. You may also have to disable animation as appropriate for the library. example:{' '} Mocking in Velocity.js
People often want to animate route transitions, which can result in
delightful UX when used in moderation. The first instinct might be to
use wrap all routes in TransitionGroup, but that approach
requires hacks and falls apart easily when used with trickier components
of React Router like Redirect. You should use{' '}
CSSTransition for each route and manage their{' '}
in prop on their own.
The main challenge is the exit transition because React
Router changes to a new route instantly, so we need to keep the old
route around long enough to transition out of it. Fortunately,{' '}
Route
's children prop also accepts a function, which
should not be confused with the render prop! Unlike the{' '}
render prop, children function runs whether
the route is matched or not. React Router passes the object containing a{' '}
match object, which exists if the route matches, otherwise
it's null. This enables us to manage the in{' '}
prop of CSSTransition based on the presence of{' '}
match.
Exit transitions will cause the content of routes to linger until they disappear, which might pose some styling challenges. Make sure that routes don't affect each other's layout, for example you can remove them from the flow of the document by using absolute or fixed positioning.
Note: When using React Transition Group with React Router, make sure to avoid using the
Switchcomponent because it only executes the first matchingRoute. This would make the exit transition impossible to achieve because the exiting route will no longer match the current URL and thechildrenfunction won't execute.
{`<${p.replace('./', '')}>`}
))
.reduce((acc, el, i) => {
acc.push(el);
if (i < metadata.composes.length - 1) {
acc.push(', ');
}
return acc;
}, [])}{' '}
unless otherwise noted.
)}
{name}
{typeInfo}
)}
{defaultValue.value.trim()}
{displayObj(renderObject(type.value))}
);
return name;
case 'union':
return type.value.reduce((current, val, i, list) => {
val = typeof val === 'string' ? { name: val } : val;
let item = this.renderType({ type: val });
if (React.isValidElement(item)) {
item = React.cloneElement(item, { key: i });
}
current = current.concat(item);
return i === list.length - 1 ? current : current.concat(' | ');
}, []);
case 'array':
case 'Array': {
let child = this.renderType({ type: type.value });
return (
{'Array<'}
{child}
{'>'}
);
}
case 'enum':
return this.renderEnum(type);
case 'custom':
return cleanDocletValue(doclets.type || name);
default:
return name;
}
}
renderEnum(enumType) {
const enumValues = enumType.value || [];
return {enumValues.join(' | ')};
}
}
ComponentTemplate.propTypes = propTypes;
function getDisplayTypeName(typeName) {
if (typeName === 'func') {
return 'function';
} else if (typeName === 'bool') {
return 'boolean';
} else if (typeName === 'object') {
return 'Object';
}
return typeName;
}
function renderObject(props) {
return transform(
props,
(obj, val, key) => {
obj[val.required ? key : key + '?'] = simpleType(val);
},
{}
);
}
function simpleType(prop) {
let type = prop.type || {};
let name = getDisplayTypeName(type.name);
let doclets = prop.doclets || {};
switch (name) {
case 'node':
return 'any';
case 'function':
return 'Function';
case 'elementType':
return 'ReactClass