New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Transitions not applying when component mounts with React@16 #216
Comments
I think I have the same problem… This is just the samples for What is the expected behavior? Which versions, and which browser / OS are affected by this issue? import React from 'react';
import TransitionGroup from 'react-transition-group/TransitionGroup';
import Transition from 'react-transition-group/Transition';
const duration = 300;
const defaultStyle = {
transition: `opacity ${duration}ms ease-in-out`,
opacity: 0,
}
const transitionStyles = {
entering: { opacity: 1 },
entered: { opacity: 1 },
};
const Fade = ({ in: inProp, children, ...otherProps }) => (
<Transition in={inProp} timeout={duration} { ...otherProps }>
{(state) => (
<div style={{
...defaultStyle,
...transitionStyles[state]
}}>
{ children }
</div>
)}
</Transition>
);
class AnimationGroup extends React.Component {
constructor(props) {
super(props)
this.state = {items: ['hello', 'world', 'click', 'me']}
}
handleAdd() {
const newItems = this.state.items.concat([
prompt('Enter some text')
]);
this.setState({ items: newItems });
}
handleRemove(i) {
let newItems = this.state.items.slice();
newItems.splice(i, 1);
this.setState({items: newItems});
}
render() {
return (
<div>
<button onClick={() => this.handleAdd()}>Add Item</button>
<TransitionGroup>
{this.state.items.map((item, i) => (
<Fade key={item}>
<div>
{item}{' '}
<button onClick={() => this.handleRemove(i)}>
remove
</button>
</div>
</Fade>
))}
</TransitionGroup>
</div>
);
}
}
export default AnimationGroup; |
Extracted the initial transition from EXITED to ENTERING to setTimeout, so that a paint will be done between. Else it is not possible to do CSS transitions, as the browser will not interpret changes to CSS properties as change.
I made a proposal for a workaround this issue: #227 |
Check out previous issues on this. Transition is a low level component with no specific affordances for css transitions, those need to be handled in the wrapping component (or use CssTransition). In this particular case you don't need a timeout you can reflow the browser, there are a few examples of this in previous issues and the components link in the note about it in the docs |
@jquense users should not expect Transition to work the same with react 16 as it does with react 15? I didn't see that in the note about it in the docs. |
@TheSharpieOne I think @jquense is probably refering to #159. There are others but this one specifically discusses the manual reflow. |
where does this issue end? |
I wish there was an option to fix this reflow issue out of the box. The CSSTransition doesn't really support using variables which I needed in my general purpose Fade animation component. I solved this by not using |
<CSSTransition in={in} timeout={200}>
{state => (
// ...
)}
</CSSTransition> |
@silvenon What is reflow hack? :/ |
|
+1 👍 |
@krabbypattified could you open a new issue providing a demo? |
Here is a demo. Hover over anything and hover/click on the pink circle. There is no transition in circle size. When I set the |
I will open a new issue. |
@krabbypattified feel free to include the same demo, you don't have to use our template. |
Use keyframes instead. Works good for me.
|
Hell yeah! @tr3v3r thank you! Holy shit this issue has like 4 "solutions" none of which work. Its a simple opacity change —been doing it for years— but wow do React components wreak havoc. Only thing I did different was add the fill-mode so that the faded-in effect would stick around:
Its just like what Scotty said:
|
I recommend using CSS Transitions instead, that's the feature that react-transition-group was built for. Like we previously said, most of the times what you really need is the |
Do you want to request a feature or report a bug?
Bug
What is the current behavior?
When trying to apply the transition on
componentDidMount
, the transition effect does not work.Steps to reproduce:
src/App.js
src/App.css
What is the expected behavior?
The transition effect should be applied when the
componentDidMount
is fired. However, it doesn't happen.If you comment the line 46 and uncomment the setTimeout(() on line 48, 49, 50, 51. It will fix the bug.
Which versions, and which browser / OS are affected by this issue? Did this work in previous versions?
This bug only reproduces with the latest version of React (16).
something tells me that it is related to the new react fiber architecture
The text was updated successfully, but these errors were encountered: