reactjs / react-transition-group Goto Github PK
View Code? Open in Web Editor NEWAn easy way to perform animations when a React component enters or leaves the DOM
Home Page: https://reactcommunity.org/react-transition-group/
License: Other
An easy way to perform animations when a React component enters or leaves the DOM
Home Page: https://reactcommunity.org/react-transition-group/
License: Other
Question is easy: why does react-transition-group render <span>
by-default? I suppose, that, rendering <div>
element is much more common case.
I'm trying to animate the first children enter, but it don't work proper. Ex:
<CSSTransitionGroup
transitionEnterTimeout={500}
transitionLeaveTimeout={500}
transitionName={'component'}
>
{isSomeConditionTrue ? this.renderChildComponent() : null}
</CSSTransitionGroup>
When the child is rendered after condition is set to true, it doesn't trigger the enter
animation, but leave
animation works when the condition backs to true. The child has a unique key. I'm making a Fiddle file to demonstrate the bug.
I'm using npm's 1.0.0 version
I'm using two differents CSSTransitionGroup, one for enter
transition and the other for leave
transition. I do this because I have the same leave
transition for the children, but I have different enter
transition depending on which children is mounted and these CSSTransitionGroup are nested deeper which cause my enter
transition and my leave
transition to happen both at the same time.
For now I just put a longer delay in CSS but when there's no leave animation to do (i.e. when first loading) there's a small noticeable delay where nothing happen.
I know I can workaround it directly in JS or with ReactTransitionGroup but it would be nice to have an option to add a class to the CSSTransitionGroup itself when it's animating so we can continue to work exclusively with CSS. π
In the way PropTypes
are structured here in the project babel-plugin-transform-react-remove-prop-types cannot remove them safely. I think its mainly because you import some definitions from other files.
Could something be done with it? Desired behaviour would be ofc that the removing transform can work.
Do you want to request a feature or report a bug?
Bug
What is the current behavior?
willReceiveProps is run before both componentWillEnter and componentDidEnter but is called after componentWillLeave and componentDidLeave
If the current behavior is a bug, please provide the steps to reproduce and if possible a minimal demo of the problem via https://jsfiddle.net or similar (template: https://jsfiddle.net/1Lb2qk3v/).
https://jsfiddle.net/8u3va7m2/
What is the expected behavior?
I would expect willReceiveProps to be called before componentWillLeave and componentDidLeave
Which versions, and which browser / OS are affected by this issue? Did this work in previous versions?
Current version on all OS and browser; unsure if this worked in previous versions
Currently, releases in the /dist
folder contain only the production/minified version.
It would be very useful for those who organize peer dependencies and include them externally (instead of bundling everything together) to have pathways for local development and production. Specifically, being able to use project build tools to include the distribution of React-transition-group in dev mode alongside the current dev React setup.
When using the minified /dist version in combination with the development React suite, errors result:
react.js:3287 Warning: Failed prop type: Minified exception occurred; use the non-minified dev environment for the full error message and additional helpful warnings.
in CSSTransitionGroup (created by AppComponent)
Using production react-transition-group with production react suite results in no errors.
So again, when building /dist it would be nice to include 2 files:
react-transition-group.js
- Development/un-minifiedreact-transition-group.min.js
- Production/minifiedDo you want to request a feature or report a bug?
Bug
What is the current behavior?
ref
function given to a CSSTransitionGroup
child is called with both the child element refence and the CSSTransitionGroupChild component instance
If the current behavior is a bug, please provide the steps to reproduce and if possible a minimal demo of the problem via https://jsfiddle.net or similar (template: https://jsfiddle.net/1Lb2qk3v/).
See console in https://jsfiddle.net/10sjj3so/6/
What is the expected behavior?
ref
should only be called for the child given to CSSTransitionGroup
, not the synthetic CSSTransitionGroupChild
instance that is an implementation detail of CSSTransitionGroup
Which versions, and which browser / OS are affected by this issue? Did this work in previous versions?
All browsers. Worked in React addons version.
Do you want to request a feature or report a bug?
Report a bug.
What is the current behavior?
When I clicked on the link to get the minified version of the package, I'm redirected to a non
working link: Not found: file "/dist/react-transition-group.min.js" in package [email protected]
If the current behavior is a bug, please provide the steps to reproduce and if possible a minimal demo of the problem via https://jsfiddle.net or similar (template: https://jsfiddle.net/1Lb2qk3v/).
What is the expected behavior?
To arrive add a working link of the minified version. This link seems to work... link
Which versions, and which browser / OS are affected by this issue? Did this work in previous versions?
Chrome browser.
Note: I could make the change on a pull request if only the readme needs to be updated.
Feature
Currently I don't believe there is support in the library for supporting sequenced or staggered transitions.
Example: Say I have 10 items that enter at the same time in a CSSTransitionGroup. The current behavior is that if I have a transitionEnter
CSS class defined, all of these animate at the same time.
Following on the previous example, if I have 10 items that enter a CSSTransitionGroup
at the same time I want to be able to specify if they stagger in or come one after another (opposed to animating at the same time). Example below for staggered transitions, the sequential one would be similar, but distinct in that transitions can only kick off after the previous one has finished.
Staggered: I have a suboptimal solution implemented as a Higher-Order Component here using a setInterval
(which is not great) here: https://github.com/Setsun/react-choreography/blob/master/src/transitions/sequenced/StaggeredTransitionDecorator.js
Sequential: I think this could be implemented using transitionend
events, where the next transitioning component mounts after the previous component fires off its transitionend
event.
Thoughts? I could spin up a PR in my free time to get a quick proof of concept since I think this would be useful for others, but I also know the API is in-flux in this PR: #24
Hi, how to use it with react router 4?
{ React.cloneElement(this.props.children, { key: this.props.location.pathname })}
Doesn't work
Do you want to request a feature or report a bug?
What is the current behavior?
i want before and after ReactCSSTransitionGroup run a function, but only componentWillAppearγcomponentDidAppear run, componentWillEnterγcomponentDidEnterγcomponentWillLeaveγcomponentDidLeave not working.
this is my code
import React, { Component, Children } from 'react';
import ReactCSSTransitionGroup from 'react-addons-css-transition-group';
import TransitionGroup from 'react-transition-group/TransitionGroup';
import ReactDOM from 'react-dom';
class TestAnimation extends Component {
state = {
color: ['red', 'blue', 'yellow'],
active: 0
}
componentDidMount() {
let i = 0;
setInterval(function (){
i = (i+1)%3;
this.setState({
active: i
});
}.bind(this), 3000);
}
render() {
let {color, active} = this.state;
return (
<div className='content'>
<ReactCSSTransitionGroup transitionName='fade' transitionEnterTimeout={1300} transitionLeaveTimeout={1300}>
<TransitionGroup key={active}> // if delete key={active} all of component function will run, but it a wrong effect.
<TransitionGroupUl color={color} active={active} key={active}/>
</TransitionGroup>
</ReactCSSTransitionGroup>
</div>
);
}
}
class TransitionGroupUl extends Component{
componentWillAppear() {
console.log(1,'componentWillAppear');
}
componentDidAppear() {
console.log(2,'componentDidAppear');
}
componentWillEnter() {
console.log(3,'componentWillEnter');
}
componentDidEnter() {
console.log(4,'componentDidEnter');
}
componentWillLeave() {
console.log(5, 'componentWillLeave');
}
componentDidLeave() {
console.log(6, 'componentDidLeave');
}
render() {
return (
<div style={{background: this.props.color[this.props.active]}} key={this.props.active}></div>
);
}
}
ReactDOM.render(
<TestAnimation />,
document.getElementById('app')
);
If the current behavior is a bug, please provide the steps to reproduce and if possible a minimal demo of the problem via https://jsfiddle.net or similar (template: https://jsfiddle.net/1Lb2qk3v/).
What is the expected behavior?
i just hope: before and after the transition effect run a function
, what should i do?
Which versions, and which browser / OS are affected by this issue? Did this work in previous versions?
Do you want to request a feature or report a bug?
Feature
What is the current behavior?
I define my routes inside a TransitionGroup
with a childFactory that wraps each child in a Page
component that defines the TransitionGroup lifecycle methods.
const One = () => <div>One</div>;
const Two = () => <div>Two</div>;
<TransitionGroup childFactory={child => <Page>{child}</Page>}>
<Route exact path='/one' component={One} />
<Route exact path='/two' component={Two} />
</TransitionGroup>
class Page extends Component {
componentWillAppear(callback) {
console.log('componentWillAppear');
callback();
}
componentDidAppear() {
console.log('componentDidAppear');
}
componentWillEnter(callback) {
console.log('componentWillEnter');
callback();
}
componentDidEnter() {
console.log('componentDidEnter');
}
componentWillLeave(callback) {
console.log('componentWillLeave');
callback();
}
componentDidLeave() {
console.log('componentDidLeave');
}
render() {
return this.props.children;
}
}
What is the expected behavior?
Only valid childs should be wrapped in Page
components. I understand each Route
is a valid child for the TransitionGroup
, though only one of them actually renders to a node, so I always get 2 Page
components, which makes it impossible to animate in/out the routes.
I understand this issue might be out of scope for this library, in which case, anybody has any pointers on how this could work?
My goal in using react-transition-group is to add the special lifecycle hooks. this.props.children is either my about, projects, or contact components. None of the hooks are initialising in the child components. Below is basically being rendered in my main App.js,
<div><TransitionGroup>{this.props.children}</TransitionGroup></div>
Do you want to request a feature or report a bug?
Very new to React and am unsure if I'm executing the library correctly.
What is the current behavior?
The hooks are not executing.
If the current behavior is a bug, please provide the steps to reproduce and if possible a minimal demo of the problem via https://jsfiddle.net or similar (template: https://jsfiddle.net/1Lb2qk3v/).
Unsure.
What is the expected behavior?
Available special lifecycle hooks.
Which versions, and which browser / OS are affected by this issue? Did this work in previous versions?
React/Dom: 0.14.9
React-transition-group: 1.1.3
React-Router: 2.8.1
Browser: Chrome
OS: Windows.
Never tested in previous versions.
Do you want to request a feature or report a bug?
Feature
What is the current behavior?
There are no callbacks when the transition ends.
More detail
Sometimes, you want to do something once an animation completes. I think it makes sense for this lib to provide this callback.
This was originally raised on the React repo here: facebook/react#5914
And a PR was made here: facebook/react#5915
I've been using a copypasta'd version of ReactTransitionGroup that adds this feature for a long time now, and it works great. I think the general approach is good; it just wasn't merged in because Facebook didn't want to maintain this lib (see facebook/react#5914 (comment) )
For more on the justification, you can read the initial issue. But also you can imagine other cases where you might want to do some action after an animation completes.
One more element appear when exchange key in Animation Group
Here is example
This example should only exchange element in list.
Sorry for not having a codepen to show this off, but when we switched from react-addons-css-transtion-group
to this lib, we noticed the enter
and enter-active
styles were applied at the same time, resulting in no transition. From looking at differences in the libs, I see that this one is using a raf
helper, and I'm wondering if that is the problem?
For example: with a fade-in style like:
enter: {
opacity: 0,
transition: 'opacity 3000ms ease',
},
enter-active: {
opacity: 1,
}
The enter
items receive opacity: 1
immediately and do not fade in.
This issue was found in the latest stable Chrome.
If ReactTransitionGroup
is unmounted before all its animations have finished a javascript error is thrown complaining about reading properties of undefined.
Specifically the callbacks _handleDoneAppearing
, _handleDoneEntering
, _handleDoneLeaving
have:
let component = this.childRefs[key];
// The following line (and its analogues) will throw with:
// Uncaught TypeError: Cannot read property 'componentDidLeave' of undefined
if (component.componentDidLeave) {
This bug is especially common with long running animations, however it can also happen with short animations if the timing is right.
Do you want to request a feature
Hi @jquense, at first thanks for maintaining this useful library. I'm using ReactCSSTransitionGroup
on my project and i need to maintain logic after animation is finished. Yes, i read documentation note, that if i need callback, i should use ReactTransitionGroup
instead, but looking at the sources it's not that hard to add callback prop to ReactCSSTransitionGroup
. So is it possible to add simple callback if i do PR or it's not possible at all by some (architecture?) reasons? Thanks.
Do you want to request a feature or report a bug?
Bug
What is the current behavior?
So I've the following component:
render() {
return(
<li styleName="Todo" ref={(li) => {this.todo = li}}>
<input styleName="Todo-checkbox" type="checkbox" ref={(checkbox) => {this.checkbox = checkbox}} onChange={this.handleChange} checked={this.props.todo.done} />
<input styleName="Todo-input" ref={(input) => {this.input = input}} defaultValue={this.props.todo.text} onKeyDown={this.handleUpdate}></input>
<span styleName="Todo-text" onDoubleClick={this.handleEdit}>{this.props.todo.text}</span>
<span styleName="Todo-delete" onClick={this.handleDelete}>✖</span>
</li>
);
}
When I log this.todo
, I get the li HTML element. So it's possible for me to toggle classes or do other stuff with it. But then I added the CSSTransitionGroup like this:
render() {
return(
<CSSTransitionGroup
transitionName={{
enter: styles['Todo--enter'],
enterActive: styles['Todo--enter-active'],
leave: styles['Todo--leave'],
leaveActive: styles['Todo--leave-active']
}}
transitionEnterTimeout={500}
transitionLeaveTimeout={300}>
<li styleName="Todo" ref={(li) => {this.todo = li}}>
<input styleName="Todo-checkbox" type="checkbox" ref={(checkbox) => {this.checkbox = checkbox}} onChange={this.handleChange} checked={this.props.todo.done} />
<input styleName="Todo-input" ref={(input) => {this.input = input}} defaultValue={this.props.todo.text} onKeyDown={this.handleUpdate}></input>
<span styleName="Todo-text" onDoubleClick={this.handleEdit}>{this.props.todo.text}</span>
<span styleName="Todo-delete" onClick={this.handleDelete}>✖</span>
</li>
</CSSTransitionGroup>
);
}
Now when I log this.todo
I get an object called CSSTransitionGroupChild
and not the ref to my original li.
What is the expected behavior?
Ref should still return the referenced element.
Which versions, and which browser / OS are affected by this issue? Did this work in previous versions?
Chrome v57
Webpack 2
React 15
React-transition-group 1.1.2
Previously reported as facebook/react#3672. I've created a CodePen with a simple example: http://codepen.io/TrevorBurnham/pen/ZLvGXz
The problem is that the CSS Transition Group's descendants' componentDidMount
operations are performed after the CSS Transition Group child is in the DOM but before that child receives the "appear" class. Since CSS transitions begin whenever a DOM element's computed styles change (per the spec), that causes a transition from the child's pre-"appear" state into its "appear" state, which is likely to affect the subsequent transition to the "appear-active" state.
For example, in the CodePen above, the pre-"appear" state has transform: scale(1)
, the "appear" state has transform: scale(0)
, and the "appear-active" state has transform: scale(1)
. If we don't force style computation between the first two states, then we get a single transition from the "appear" state to the "appear-active" state, going from 0-scale to full-scale over 2s. But if a descendant calls document.body.clientWidth
during its componentDidMount
, we get 2 CSS transitions: one from the pre-"appear" state to the "appear" state, then a reversal just a few milliseconds later when the "appear-active" class is applied. When that happens, it looks like no transition occurred at all!
It should be possible to prevent this from happening by applying the "appear" classes to the CSS Transition Group child(ren) during render
instead of waiting until componentDidMount
.
Do you want to request a feature or report a bug?
I would like to request a new feature.
What is the current behavior?
The current behavior is awesome.
If the current behavior is a bug, please provide the steps to reproduce and if possible a minimal demo of the problem via https://jsfiddle.net or similar (template: https://jsfiddle.net/1Lb2qk3v/).
It's not a bug.
What is the expected behavior?
To have a HOC with named withTransitions
(or something like that). It could be very useful for projects using css-in-js libraries.
I just published this library and then it occurred to me that perhaps it would be worth it to add a HOC like that one to the react-transition-group
library.
If you like that idea I wouldn't mind sending a PR for that.
A fancy usage of that HOC could be:
import R from 'ramda';
import { compose, mapProps } from 'recompose';
import { styled } from 'styletron-react';
import { withTransitions } from 'react-transition-group';
const withStyles = styles => Component => styled(Component, styles);
export const HoverBox = compose(
withTransitions(R.propEq('isHovering', true), 200),
withStyles(({ transitionState }) => {
const [opacity, top] = transitionState === 'NORMAL'
? [1, '10px']
: [0, '15px'];
return {
padding: '10px',
position: 'absolute',
width: '83%',
right: '0',
opacity,
top,
transition: 'all 0.2s ease',
};
}),
mapProps(R.omit(['transitionState', 'isHovering']))
)(`div`);
Not sure if this is still relevant (sorry!)
Moving facebook/react#6365 here.
Original report by @spicyj below.
<ReactTransitionGroup>Welcome to React</ReactTransitionGroup>
throws
Invariant Violation: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. Check the render method of ReactTransitionGroup.
Not sure what this should do, but at the very least the error message is terrible.
feature
Prop types in this package are static and included in both development and production. Best practice is to use the plugin babel-plugin-transform-react-remove-prop-types with mode wrap. This allows developers to use the development/ES/imported version with prop types or use the external version that is minified fully.
Hello,
I'm probably being an idiot, but can't figure how to import react-transition-group
into my project correctly.
I've done an npm install https://github.com/reactjs/react-transition-group.git --save
which works fine. Then I do import CSSTransitionGroup from 'react-transition-group/CSSTransitionGroup';
This throws a Module not found: 'react-transition-group/CSSTransitionGroup'
error.
Looking into it it appears to be that in package.json
that main
points to lib/index.js
which doesn't exist, and I guess only exists if you build the project.
So...do I need to build the project myself within my dependencies, or am I being an idiot and this is not the right way to use this project at all (more likely :))
Thanks!!
Do you want to request a feature or report a bug?
Bug
What is the current behavior?
onExited
is not firing for Transition
s.
If the current behavior is a bug, please provide the steps to reproduce and if possible a minimal demo of the problem via https://jsfiddle.net or similar (template: https://jsfiddle.net/1Lb2qk3v/).
Not sure how to link to the edge version of the library from jsfiddle, so see demo below.
What is the expected behavior?
onExited
fires after the transition timeout ("exited" printed in demo).
Which versions, and which browser / OS are affected by this issue? Did this work in previous versions?
Tested in Chrome 58.0.3029.110 on macOS Sierra.
webpack.config.js
module.exports = {
entry: __dirname + '/app.jsx',
output: {
path: __dirname + '/dist',
filename: 'app.js',
},
module: {
rules: [
{ test: /.jsx?$/, include: __dirname, loader: 'babel-loader' }
]
},
}
app.jsx
import React from 'react';
import {render} from 'react-dom';
import {Transition, TransitionGroup} from './react-transition-group'
class App extends React.Component {
constructor() {
super();
this.state = {showChild: false};
}
toggleChild = (event) => {
this.setState({showChild: !this.state.showChild});
}
render() {
const child = <Transition
timeout={1000}
onEntering={() => console.log('entering')}
onEntered={() => console.log('entered')}
onExiting={() => console.log('exiting')}
onExited={() => console.log('exited')}
>
<div style={{height: '50px', width: '50px', backgroundColor: 'blue'}} />
</Transition>
return <div id="app">
<button onClick={this.toggleChild}>Toggle</button>
<TransitionGroup>{this.state.showChild ? child : null}</TransitionGroup>
</div>;
}
}
render(<App/>, document.getElementById('app'));
index.html
<!DOCTYPE html>
<html>
<head></head>
<body>
<div id="app"></div>
<script type="text/javascript" src="app.js" charset="utf-8"></script>
</body>
</html>
Do you want to request a feature or report a bug?
FEATURE
What is the expected behavior?
An animation/transition that activates when a component disappears or unmounts
It's currently difficult to do animations on unmount for deeply nested components if their parents are also unmounted because the transition group does not run componentWillLeave on them. Is there any plan to support this type of behavior (maybe using the context api?). I know it would greatly increase the complexity, but I'm just curious since it's a common issue I've seen people run into and current solutions I've seen involve making many unrelated pieces of the app aware of this transition.
Do you want to request a feature or report a bug?
Bug
What is the current behavior?
When ReactTransitionGroup is used like this (also compare http://codepen.io/ladz/pen/bgzYZG?editors=0010)
<CSSTransitionGroup
transitionName="animatedFullscreenOverlay__anim"
transitionEnterTimeout={0}
transitionLeaveTimeout={0}
>...
(setting transitionEnterTimeout
and transitionLeaveTimeout
to zero) the children of <CSSTransitionGroup/>
are not removed when the leave
-animation completed. However, it can be fixed by settings both values to 1
.
Which versions of React, and which browser / OS are affected by this issue?
PropTypes is deprecated in React main package now. It seems this tansition-group component should be update by using prop-types. Maybe having other ways to solve it by ourselves, but I don't know the way, hoping guys' help, thanks.
Hi All,
I came across an issue while writing my application, and I believe it can be best solved with a simple addition to the TransitionGroup. Essentially, I need to pass props into the transitioning components within TransitionGroup, however this.props.children does not contain the exiting element.
You can read the full details of my issue on StackOverflow here (no need to post the same thing twice)
My current code to insert props (not sending updated props to exiting components):
class TransitionContainer extends React.Component{
render(){
return(
<div>
<TransitionGroup>
{
React.Children.map(this.props.children,
(child) => React.cloneElement(child,
{ key: child.props.route.path + "//" + child.type.displayName,
dispatch: this.props.dispatch,
transitionState: this.props.transitionState
}
)
)
}
</TransitionGroup>
</div>
)
}
}
</TransitionGroup>
My proposed solution:
class TransitionContainer extends React.Component{
render(){
let {dispatch,transitionState} = this.props
return(
<div>
<TransitionGroup
extraProps={{dispatch: dispatch,transitionState:transitionState}}>
{
React.Children.map(this.props.children,
(child) => React.cloneElement(child,
{ key: child.props.route.path + "//" + child.type.displayName}
)
)
}
</TransitionGroup>
</div>
)
}
}
The extraProps
prop passed to TransitionGroup
will be passed to all of state.children
so that they can receive updates during the transition lifecycle.
Let me know what you think, and thanks for all the great work on this library!! And I can probably write it in and pull request myself if I get a few approving votes on this idea.
-Jay
Do you want to request a feature or report a bug?
Bug
What is the current behavior?
In IE (10, 11, Edge) the CSS transition starts very close to the intended end state. If you're not looking closely it's like the transition is not happening at all. In the example linked to below one of the divs should slide in from the right but does not.
The issue occurs with some transition properties but not others. For example, I can't reproduce when transitioning on 'right' but can reproduce when transitioning on 'opacity' or 'transform'. Also, opacity and transform appear to work when animating an empty div, but not one with any content.
If the current behavior is a bug, please provide the steps to reproduce and if possible a minimal demo of the problem via https://jsfiddle.net or similar (template: https://jsfiddle.net/1Lb2qk3v/).
http://codepen.io/cjulian/pen/xqPMaa
The toggle button rendered in the pen above will trigger a slide-in animation. Notice that only one div slides in.
What is the expected behavior?
In the above pen both divs should slide in from the right. Only one does.
Which versions, and which browser / OS are affected by this issue?
Affected browsers include IE 10, 11 and Edge. I was able to reproduce the issue with react-transition-group version 1.1.1. Was also able to reproduce with react-addons-css-transition-group 15.4.2 and 15.0.1.
Did this work in previous versions?
The transition works as expected in react-addons-css-transition-group 0.14.8
question:
if ReactTransitionGroup component's children component is returned by a higher-order component, the children component's animated methods such as componentWillAppear can not be called.
e.g.
<ReactTransitionGroup>
<ChildComponent>
</ReactTransitionGroup>
ChildComponent.js
@immutableRenderDecorator //return a wrapped component by immutableRenderDecorator
class ChildComponent extends Component {
}
export default ChildComponent;
question: a wrapped component returned by immutableRenderDecorator don't have animated methods such as componentWillAppearγ
if i have to use higher-order component to wrap ChildComponent, how ReactTransitionGroup improve to resolve this question?
I want to implement pull-to-refresh function in my list. I suppose I should use react-transition-group.
I think it's strange to implement like:
// Just a sample
<div onTouchMove={(e) => this.setState({headerHeight: e.touches[0].pageY - startPosition})}>
<div style={height: this.state.headerHeight}></div>
</div>
I think it's strange to update state in touchMove. I don't know what's the react way. So I suppose I can get DOM node by refs and implement animation in touchMove, then call callback function in touchEnd.
I've found I can get children's refs in ReactTransitionGroup. Just like
<TransitionGroup ref={(ref) => this._refs = ref}>
<div>Hello</div>
</TransitionGroup>
Then I can get <div>Hello</div>
by this._refs.refs['.$.0']
It's quite ugly.
Is there any better way or further plan to implement something like componentWillChange
which is called after componentDidUpdate
?
Do you want to request a feature or report a bug?
Feature
What is the current behavior?
Transitioning out always removes children from the DOM.
For lists of items, you typically do want to remove and add things to the DOM as the things transition, so the current behavior of the transition group makes sense there.
However, when using the TransitionGroup for a single item, it's more performant to just leave the thing in the DO, while reducing their opacity to 0 and turning off pointer-events. Then, you can do transitions for things like modals without any reflows or paints. There are a handful of common one-off DOM elements that this is useful for: modals, dropdowns, flyouts, tooltips, etc. Basically, anything that is not in a list that has animated entries and exits.
For desktop apps, unmounting and re-mounting might not matter too much, but when developing with slow mobile phones in mind, I do my best to reduce reflows and paints.
Is there any interest in supporting this here? I took a quick look at the big refactor in #24, and it doesn't seem to support this, as it appears to always unmount by default.
One way to implement this would be with a Boolean prop that tells the transition group whether the child should remain in the DOM, or be removed. It could unmount the children by default for backwards compatible.
Right now, I use a modified TransitionGroup for these things, and then the regular TransitionGroup for lists. It'd be cool to use just one.
What do folks think? Out of scope for the TransitionGroup? Maybe worth it?
There are so many issues without any response whatsoever.. Do people even maintain this project? Otherwise I'm just going to look for alternatives..
I just tested the current version on npm. And its not working with react router v4. Is the currently published version here: https://www.npmjs.com/package/react-transition-group
The leave and appear transitions happen, however the enter transition is not happening. Here is how we use it in react router v4 - http://stackoverflow.com/a/42042780/1828637
However the one shipping with react currently works great. I currently get from react-addons-css-transition-group
- https://www.npmjs.com/package/react-addons-css-transition-group
Do you want to request a feature or report a bug?
Bug
What is the current behavior?
If, during a transition, the callback (_handleDoneEntering/leaving) is called. i.e. the transition is interrupted and the component is now leaving - when the "_handleDone[Entering|Leaving]" callback is called, the ref for the element leaving is null which causes an error.
In my instance, I am calling this callback during a componentWillReceiveProps.
This appears to be a consequence of changing to a function based ref (which I think is a good thing, but its caused by this).
The reason this happens is when the component is updated via react (see 'receiveComponent' method). React checks to see if the refs have changed to determine if it needs to detach/attach refs before/after it updates the component. With the new function method - react determines that the refs have -always- changed as the function signature has changed (it's an anonymous function generated each time). This means that react will detach the ref - after that, the component is updated and the callback is called, the ref is null, the "handleDone" method attempts to call a method on a null component from "this._childRefs[]".
Previously when using a string ref, it would see that the string is not different and would not require a change - thus leaving the ref in place.
If the current behavior is a bug, please provide the steps to reproduce and if possible a minimal demo of the problem via https://jsfiddle.net or similar (template: https://jsfiddle.net/1Lb2qk3v/).
Have a transition group
Have a component that enters/leaves the transition group
During an enter or leave (i.e. it's not completed yet), the child component should call the callback (say in, componentWillReceiveProps)
Error.
I created a fiddle:
https://jsfiddle.net/tzLojs6n/
Hit the 'add' button once, then hit it again within 3 seconds.
What is the expected behavior?
The ref exists and that handleDone does not throw an error.
Which versions, and which browser / OS are affected by this issue? Did this work in previous versions?
This did work in previous versions where a string ref was used (see the original one still included in React-addons).
I've been able to fix this by keeping a reference to the function generated per child key. Thus when react compares the refs, it sees they are the same and it works. Given the idea that the child at a given key should always be the same component (and all it does is set the same key anyway) - I believe this is a safe thing to do.
Should I create a pull request for this change?
Not sure whether this is a bug, a feature request or I am doing something completely wrong.
If I would like to get the node reference of a create element, I would use a ref callback like this:
return <div ref={node => this.parent = node}>
<span> foo! </span>
</div>
}
this.node
returns the correct HTMLDivElement.
However, if I would like to get the reference to the div create by TransitionGroup, it returns the component (ReactTransitionGroup
) itself, instead of the created HTMLDivElement.
return <TransitionGroup ref={node => this.node = node} component="div" transitionName="foobar" className="foo">
{component}
{bubble}
</TransitionGroup>;
I would like to get access to the HTMLDivElement created by TransitionGroup itself without using ReactDOM. It this even possible?
Do you want to request a feature or report a bug? Bug
What is the current behavior? In the "Rendering a Single Child" FB documentation / readme, coders are encouraged to pass in prop component = null
for ReactTransitionGroup
like so if childrenArray[0]
is not truthy:
function FirstChild(props) {
const childrenArray = React.Children.toArray(props.children);
return childrenArray[0] || null;
}
<ReactTransitionGroup component={FirstChild}>
{someCondition ? <MyComponent /> : null}
</ReactTransitionGroup>
However, if null
is passed in as component
, e.g.,
var ReactTransitionGroup = React.addons.TransitionGroup;
var Hello = React.createClass({
render: function() {
return <ReactTransitionGroup component={null}/>;
}
});
ReactDOM.render(
<Hello />,
document.getElementById('container')
);
The following console error is thrown:
Warning: React.createElement: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: null. Check the render method of `ReactTransitionGroup`.
printWarning @ npmcdn.com/[email protected]/dist/react-with-addons.js:5276
npmcdn.com/[email protected]/dist/react-dom.js:17903 Uncaught Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: null. Check the render method of `ReactTransitionGroup`.
at invariant (npmcdn.com/[email protected]/dist/react-dom.js:17896)
at ReactCompositeComponentWrapper.instantiateReactComponent [as _instantiateReactComponent] (npmcdn.com/[email protected]/dist/react-dom.js:16037)
at ReactCompositeComponentWrapper.performInitialMount (npmcdn.com/[email protected]/dist/react-dom.js:4821)
at ReactCompositeComponentWrapper.mountComponent (npmcdn.com/[email protected]/dist/react-dom.js:4712)
at Object.mountComponent (npmcdn.com/[email protected]/dist/react-dom.js:11542)
at ReactCompositeComponentWrapper.performInitialMount (npmcdn.com/[email protected]/dist/react-dom.js:4825)
at ReactCompositeComponentWrapper.mountComponent (npmcdn.com/[email protected]/dist/react-dom.js:4712)
at Object.mountComponent (npmcdn.com/[email protected]/dist/react-dom.js:11542)
at ReactCompositeComponentWrapper.performInitialMount (npmcdn.com/[email protected]/dist/react-dom.js:4825)
at ReactCompositeComponentWrapper.mountComponent (npmcdn.com/[email protected]/dist/react-dom.js:4712)
If the current behavior is a bug, please provide the steps to reproduce and if possible a minimal demo of the problem via https://jsfiddle.net or similar. See https://jsfiddle.net/urLq585z/ and open your console.
What is the expected behavior? No error should be thrown when null
is passed as the component
prop to ReactTransitionGroup
. Nothing should render. I'd also like to point out that if you don't explicitly set component to null, e.g., render <ReactTransitionGroup />
the error is not present the default component prop is a span tag.
Which versions of React, and which browser / OS are affected by this issue? Did this work in previous versions of React? Latest version of React; I am on Chrome 56 on MacOS. Unsure about previous versions; presumably also broken.
(originally reported at facebook/react#9056)
Is react-transition-group on a CDN somewhere? I find it helpful to include it in jsBin to experiment and share on Stack Overflow when I have questions. I tried including the react-with-addons, but it didn't work.
I've found that I can use ReactTransitionGroup in a React Native app without problems. @yachaka said here facebook/react-native#9321 that it's really slow but I haven't confirmed that yet, it seems to run fine.
This seems like a useful utility that could pretty easily be offered up to the React Native community.
There are only 2 issues holding it up that I found. One is the DOM reliances in the npm package that prevent it from being installed in a standard RN project:
βββ UNMET PEER DEPENDENCY react@^15.0.0
βββ UNMET PEER DEPENDENCY react-dom@^15.0.0
βββ¬ react-transition-group@1.0.0
βββ dom-helpers@3.2.0
npm WARN react-transition-group@1.0.0 requires a peer of react@^15.0.0 but none was installed.
npm WARN react-transition-group@1.0.0 requires a peer of react-dom@^15.0.0 but none was installed.
npm WARN 3rdParty No description
npm WARN 3rdParty No repository field.
npm WARN 3rdParty No README data
npm WARN 3rdParty No license field.
To get around that temporarily I cloned this repo and pasted these files into my project:
And secondly the default of 'span'
means you need to pass component={View}
.
<ReactTransitionGroup component={View}>
{this.state.showLogo &&
<AnimatedLogo key='logo' onPress={this.handleLogoPress}/>
}
</ReactTransitionGroup>
Even without solving for the View issue, it would be handy to come up with a way to make this library easily installable for React Native, perhaps just via some npm magic?
The docs do not show how to install the module. Is there an npm install method and then how do you import after using npm install?
This a question more than anything else. What is the recommendation when using this package in another package - add it as a dependency
or peerDependency
?
Do you want to request a feature or report a bug?
Bug
What is the current behavior?
When using TransitionGroup, calling the componentWillEnter callback in componentDidUpdate causes an undefined error. This does not happen with the original TransitionGroup from react-addons-transition-group, which means that react-transition-group; is not a drop-in replacement.
If the current behavior is a bug, please provide the steps to reproduce and if possible a minimal demo of the problem via https://jsfiddle.net or similar (template: https://jsfiddle.net/1Lb2qk3v/).
Can be seen in the example project in https://github.com/frankwallis/react-slidein (npm start). Pressing the toggle button before the animation has ended will trigger an exception when using the new TransitionGroup component.
What is the expected behavior?
The new TransitionGroup component should behave the same as the original TransitionGroup component. Calling the callback should terminate the animation and not error.
Which versions, and which browser / OS are affected by this issue? Did this work in previous versions?
All versions in the new repository.
In the documentation, I can see it says it works both with CSS transitions and CSS animations. I can't get it working with CSS animations at all. Maybe the documentation could provide an example of how to use this with CSS animations?
Got "Warning: Accessing PropTypes via the main React package is deprecated. Use the prop-types package from npm instead." while using React 15.5.3 "react-transition-group/CSSTransitionGroup" add-on.
It looks like this addon uses old PropTypes. Do somebody know how to avoid this Warning for this add-on? Or please fix it.
Added StackOverflow discussion:
http://stackoverflow.com/questions/43322476/how-to-fix-react-15-5-3-proptypes-deprecated-warning-while-using-react-transitio?noredirect=1#comment73709971_43322476
Currently building an app on next.js and cannot get any animations to work. Components appear and disappear without animation. Pages are being served via express/nextjs.
import CSSTransitionGroup from 'react-transition-group/CSSTransitionGroup'
<CSSTransitionGroup transitionName='mainnav' transitionEnterTimeout={500} transitionLeaveTimeout={300}>
{
this.state.mainNav ? null : <NavBar />
}
</CSSTransitionGroup>
<CSSTransitionGroup transitionName='mininav' transitionEnterTimeout={500} transitionLeaveTimeout={300}>
{
this.state.mainNav ? <MiniNavBar /> : null
}
</CSSTransitionGroup>
.mininav-enter {
opacity: 0.01;
}
.mininav-enter.mininav-enter-active {
opacity: 1.0;
-webkit-transition: opacity 2000ms, ease-in;
}
.mininav-leave {
opacity: 1;
}
.mininav-leave.mininav-leave-active {
opacity: 0.01;
-webkit-transition: opacity 2000ms ease-in;
}
.mainnav-enter {
opacity: 0.01;
}
.mainnav-enter.mainnav-enter-active {
opacity: 1.0;
-webkit-transition: opacity 2000ms, ease-in;
}
.mainnav-leave {
opacity: 1;
}
.mainnav-leave.mainnav-leave-active {
opacity: 0.01;
-webkit-transition: opacity 2000ms ease-in;
}
Hi, I happen to have worked on a project making css transitions reliable in React and used it internally in my projects so far. I recently open sourced it. @gaearon has asked me to work with you guys: @taion and @jquense.
First check it out: https://wikiwi.github.io/react-css-transition/
It is quiet feature complete and solves most issues that users were complaining on the React issue list.
The projects resolves around a workaround to make transitionEnd
more reliable by running a second transition that only lasts 1 ms to determine the start of the transition. The project also handles other edge cases like phantom transitionEnd events that happens when a transition ends shortly before another transition starts.
By doing this it doesn't need to rely on timeouts which generally don't work well especially on low end mobile devices and can reliably notify the user of the end of the transition.
Though to provide this reliability it has to carefully track the current state of the transition in order to handle an interruption in the best way possible.
It comes as a CSSTransition
Component that can transition between two states but also includes a CSSTransitionGroup
that coordinates CSSTransition
Components to achieve the features similar to yours.
Though at the moment I'm not sure how we would collaborate.
What are your thoughts?
A declarative, efficient, and flexible JavaScript library for building user interfaces.
π Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. πππ
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google β€οΈ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.