This is basically the same as the ExitHandler from react-transition-group
except that this allows for the element type to be provided.
The Collapse is really just a convenience wrapper for the useCrossFade
hook that triggers the transition by cloning the ref and className into
the children of this component.
This transition will only fire on mount and when the appear prop is set to
true, so the way to trigger new animations is by changing the key for
this component so it re-mounts. However it is generally not recommended to
fire this transition on first page load especially when dealing with server
side rendering. A simple way to work around this is have the CrossFade near
the root of the app and just disable the appear prop until the first
render.
If you want more fine-grain control over the transition, it is recommended to
use the useCrossFade hook instead.
The Collapse component is used to transition a child element in and
out of view by animating it's max-height. This means that the child must
either be an HTMLElement or a component that forwards the ref to an
HTMLElement and applies the style, className, and hidden props to an
HTMLElement.
Note: This component should not be used for position: absolute or
position: fixed elements. Instead, the ScaleTransition or just a simple
transform transition should be used instead. Animating max-height,
padding-top, and padding-bottom is much less performant than transform
transition since it forces DOM repaints.
This ScaleTransition component is used to trigger an animation that
switches between an opacity of 0 and 1 and using a transform: scale(0)
to transform: scale(1). It is recommended to also manually apply a
transform-origin style or use the useFixedPositioning hook to generate
for you so that the animation starts from a specific point.
Since the default scale animation is X and Y, you can enable the vertical
prop which will update the transition to use transform: scaleY(0) to
transform: scaleY(1) instead.
This hook is heavily inspired by the CSSTransition component from
react-transition-group since it's really just a hook version for it.
This hook allows you to transition class names for an element for enter and exit transitions.
There are two different ways to create an "appear-only"/"on-mount-only"
transition: use the onEntered callback to reset the transitionIn to
false, or manually fire the ENTERED action with the returned dispatch
function when it should be fired again.
Example changing transitionIn for pathname changes:
const [transitionIn, setTransitionIn] = useState(true);
const [rendered, transitionProps] = useCSSTransition({
appear: true,
timeout: { enter: 200 },
transitionIn,
onEntered: () => setTransitionIn(false),
});
const prevPathname = useRef(pathname);
if (pathname !== prevPathname.current) {
prevPathname.current = pathname;
setTransitionIn(true)
}
return (
<div {...transitionProps}>
<Switch>
<Route path="/" component={Home} />
<Route path="/other" component={Other} />
</Switch>
</div>
);
Example with dispatch for pathname changes:
const [rendered, transitionProps, dispatch] = useCSSTransition({
appear: true,
timeout: { enter: 200 },
transitionIn: true,
});
const prevPathname = useRef(pathname);
if (pathname !== prevPathname.current) {
prevPathname.current = pathname;
dispatch(ENTERED);
}
return (
<div {...transitionProps}>
<Switch>
<Route path="/" component={Home} />
<Route path="/other" component={Other} />
</Switch>
</div>
);
An ordered list of a boolean if the component should be rendered, transition props to provide to the transitioning element, a dispatch function for triggering the transition manually (should not be used much), and the current transition stage.
The useCollapse hook is used to transition a child element in and
out of view by animating it's max-height. This means that the child
must either be an HTMLElement or a component that forwards the ref
to an HTMLElement and applies the style, className, and hidden
props to an HTMLElement.
Simple Example:
const Example = () => {
const [collapsed, setCollapsed] = useState(true);
const [rendered, transitionProps] = useCollapse(collapsed);
return (
<>
<Button onClick={() => setCollapsed(!collapsed)}>Toggle</Button>
{rendered && (
<div {...transitionProps}>
<Text>Stuff that should be animated</Text>
<div>Whatever content...</div>
</div>
)}
</>
);
}
Note: This should not be used for position: absolute or position: fixed
elements. Instead, the ScaleTransition or just a simple transform
transition should be used instead. Animating max-height, padding-top, and
padding-bottom is much less performant than transform transition since it
forces the DOM to repaint during the
Boolean if the element is currently collapsed. Changing this value will cause the animation to trigger.
An ordered list containing a boolean if the collapse should be rendered in the DOM followed by an object of props to pass to the collapsible element to handle the transition.
This is a simple wrapper for the useCSSTransition that will allow you to
trigger cross fade transitions. The default behavior for this hook triggers
the transition immediately once mounted. This is great if it is being used
for new data appearing in a list, but not super great for route transitions.
If you want to create a route transition, it's recommended to set the
appear option to false and then manually fire the ENTER transition from
the dispatch function. Here's a quick example using the Layout component
from @react-md/layout and react-router.
import { useLocation, BrowserRouter } from "react-router-dom";
import { useCrossFade, ENTER } from "@react-md/transition";
const App = () => {
const { pathname } = useLocation();
const [, { ref, className }, dispatch] = useCrossFade({
appear: false,
});
const prevPathname = useRef(pathname);
if (pathname !== prevPathname.current) {
prevPathname.current = pathname;
dispatch(ENTER);
}
return (
<Layout
{...useLayoutNavigation(navItems, pathname)}
appBarTitle="My App"
mainRef={ref}
mainClassName={className}
>
{children}
</Layout>
);
}
An ordered list of a boolean if the component should be rendered, transition props to provide to the transitioning element, a dispatch function for triggering the transition manually (should not be used much), and the current transition stage.
This hook is used to automatically handle fixed positioning when an element
is used alongside a Transition from react-transition-group. This will
provide merged onEnter, onEntering, onEntered, and onExited handlers
to pass down as well as the current style object to apply to the element.
Until the element has been removed from the DOM and is visible, the position will automatically update when the user scrolls or resizes the screen.
This is heavily inspired by the Transition component from
react-transition-group since it's really just a hook version of it.
This hook allows you to transition between an enter and exit state with
defined timeouts, but you'll most likely be looking for the
useCSSTransition instead.
An object describing the current transition stage and props that should be passed to a component.
Generated using TypeDoc
This is basically the same as the
EnterHandlerfromreact-transition-groupexcept that this allows for the element type to be provided.