{description}
- return ( -{description}
- - {children} -@@ -35,7 +35,8 @@ class Index extends React.Component { like{' '} React-Motion - , it does not animate styles by itself. Instead it exposes + + , 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. @@ -78,7 +79,7 @@ yarn add react-transition-group ) )} -
+ 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 instict might be to use
- wrap all routes in TransitionGroup, but that approach
+ 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{' '}
@@ -38,14 +38,15 @@ const WithReactRouter = ({ data, location }) => (
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.
+ 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 @@ -63,7 +64,7 @@ const WithReactRouter = ({ data, location }) => ( 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.
+
+
)}