timeout not behaving as expected

[DenisValcke]

Do you want to request a feature or report a bug?
Report a bug.

What is the current behavior?
If the timeout is given the same value as the duration of the transition, the timeout causes a delay on enter but not when exiting.
If the timeout is set to 0, the timeout doesn't cause a delay on enter but the component just blinks out on exit.
If the timeout is set to { enter: 0, exit: duration }, everything works as I would expect in the first scenario.

What is the expected behavior?
I would expect the timeout to be either a delay on the enter/exit or to be a property to make the component wait for the transition to end. Now it's a bit of both.

Which versions, and which browser / OS are affected by this issue? Did this work in previous versions?
v2.4.0 in Chrome 67 with React 16.3.2

My code looks like this:

import React from "react";
import Transition from "react-transition-group/Transition";
import PropTypes from "prop-types";
import Sidebar from "./Sidebar";

const AnimatedSidebar = (props) => {
	const { show, children, position } = props;
	const duration = 300;
	const defaultStyle = {
		transition: `${position} ${duration}ms ease-in-out`,
		[position === "right" ? "right" : "left"]: "-21.25rem",
	};
	const transitionStyles = {
		entering: { [position === "right" ? "right" : "left"]: "-21.25rem" },
		entered: { [position === "right" ? "right" : "left"]: "0" },
	};

	return (
		<Transition in={show} timeout={{ enter: 0, exit: duration }} unmountOnExit>
			{(state) => (
				<Sidebar style={{ ...defaultStyle, ...transitionStyles[state] }} position={position}>{children}</Sidebar>
			)}
		</Transition>
	);
};

AnimatedSidebar.propTypes = {
	show: PropTypes.bool,
	children: PropTypes.any,
	position: PropTypes.oneOf(["left", "right"]),
};

export default AnimatedSidebar;

[silvenon]

CSSTransition component might be a better fit for you, we added the following note about reflows in the Transition docs:

Note: For simpler transitions the Transition component might be enough, but take into account that it's platform-agnostic, while the CSSTransition component forces reflows in order to make more complex transitions more predictable.

Transitioning styes on enter with Transition doesn't work well. Let me know if CSSTransition solves your problem.

[DenisValcke]

When I try with the CSSTransition component I get more or less the same effect. The enter class disappears to fast to make the transition happen. Using the enter-done class I can make the transition happen but because of the timeout on enter the transition takes that duration before it happens.

What I ended up doing is the following...

In my AnimatedSidebar I stayed with the same timing for the timeout-prop:

import React from "react";
import CSSTransition from "react-transition-group/CSSTransition";
import PropTypes from "prop-types";
import Sidebar from "./Sidebar";

const AnimatedSidebar = (props) => {
	const { show, children, position } = props;
	const duration = {
		enter: 0,
		exit: 300,
	};

	return (
		<CSSTransition in={show} timeout={duration} classNames="sidebar" unmountOnExit>
			<Sidebar position={position}>{children}</Sidebar>
		</CSSTransition>
	);
};

AnimatedSidebar.propTypes = {
	show: PropTypes.bool,
	children: PropTypes.any,
	position: PropTypes.oneOf(["left", "right"]),
};

export default AnimatedSidebar;

And in my Sidebar I made sure the transition happens on the enter-done class:

import styled from "react-emotion";
import PropTypes from "prop-types";
import { getBoxShadow, getColor, availableColors } from "../../styles/theme";

const Sidebar = styled("div")`
	background: ${getColor(availableColors.WHITE)};
	position: fixed;
	top: 3.75rem;
	${(props) => props.position}: -21.25rem;
	z-index: 999;
	width: 21.25rem;
	max-width: 85vw;
	height: calc(100vh - 3.75rem);
	${getBoxShadow()};

	transition: ${(props) => props.position} 0.3s ease-in-out;

	&.sidebar-enter-done {
		${(props) => props.position}: 0;
	}
`;

Sidebar.propTypes = {
	position: PropTypes.oneOf(["left", "right"]),
};
Sidebar.defaultProps = {
	position: "left",
};

export default Sidebar;

Now it feels less like a bug and more intentional, like I'm waiting for the component to have entered to make the transition and when the class is removed it transitions back out before unmounting the component again.

[DenisValcke]

I will close this issue since my problem is more or less solved without having the feeling that somethings off. Thanks for the feedback 👍

[silvenon]

I read your first issue again and I see where the misunderstanding happened. When you first tried matching the enter timeout with your CSS (i. .e. enter: 300), you were trying to add the transition on .sidebar-enter class instead of .sidebar-enter-active. Set enter back to 300 and try using .sidebar-enter-active instead, use our official example as a reference.

Explanation: .sidebar-enter-active is the reflow hack. Entering transitions are tricky because that's sometimes also when the element is mounted in the DOM (you're using unmountOnExit, so that will always be the case). Since mounting and transitioning can't happen at the same time, we first mount the element, then immediately add the .sidebar-enter-active class and force a reflow. That's how the transitions can kick in, but you have to use .sidebar-enter-active.

Hopefully that helps. We should make this more clear in the docs.