I have a Notification
class to manage creating/removing Notifications from the UI. I can successfully show/hide notifications, but the notifications do not animate in/out.
import React from 'react'
import addons from 'react/addons'
const ReactCSSTransitionGroup = React.addons.CSSTransitionGroup
let id = 0
export default class Notification {
constructor (content, className) {
let div = document.createElement('div')
document.body.appendChild(div)
let onClose = () => React.unmountComponentAtNode(div)
React.render(
<NotificationElement className={ className } id={ id++ } onClose={ onClose }>
{ content }
</NotificationElement>,
div
)
}
}
class NotificationElement extends React.Component {
constructor(_) {
super(_)
}
render() {
const className = `Notification ${ this.props.className }`
return (
<ReactCSSTransitionGroup transitionName="slideIn">
<div className={ className } key={ this.props.id }>
{ this.props.children }
<a className="close-button" onClick={ this.props.onClose }>×</a>
</div>
</ReactCSSTransitionGroup>
)
}
}
I have a Notification
class to manage creating/removing Notifications from the UI. I can successfully show/hide notifications, but the notifications do not animate in/out.
import React from 'react'
import addons from 'react/addons'
const ReactCSSTransitionGroup = React.addons.CSSTransitionGroup
let id = 0
export default class Notification {
constructor (content, className) {
let div = document.createElement('div')
document.body.appendChild(div)
let onClose = () => React.unmountComponentAtNode(div)
React.render(
<NotificationElement className={ className } id={ id++ } onClose={ onClose }>
{ content }
</NotificationElement>,
div
)
}
}
class NotificationElement extends React.Component {
constructor(_) {
super(_)
}
render() {
const className = `Notification ${ this.props.className }`
return (
<ReactCSSTransitionGroup transitionName="slideIn">
<div className={ className } key={ this.props.id }>
{ this.props.children }
<a className="close-button" onClick={ this.props.onClose }>×</a>
</div>
</ReactCSSTransitionGroup>
)
}
}
Share
Improve this question
edited Apr 27, 2015 at 15:08
Felix Kling
817k181 gold badges1.1k silver badges1.2k bronze badges
asked Apr 26, 2015 at 23:26
bchernybcherny
3,1722 gold badges28 silver badges36 bronze badges
2 Answers
Reset to default 5ReactCSSTransitionGroup
will only animate its children when they are added or removed from its props
. In your case, the children
prop of your ReactCSSTransitionGroup
never changes.
Here's an example of what you could do instead:
let notificationsContainer = document.createElement('div');
document.body.appendChild(notificationsContainer);
let notifications = [];
function renderNotifications() {
React.render(<Notifications notifications={notifications} />, notificationsContainer);
}
class Notifications extends React.Component {
render() {
return (
<ReactCSSTransitionGroup transitionName="slideIn">
{this.props.notifications.map(notification =>
<NotificationElement
key={ notification.id }
className={ notification.className }
onClose={ notification.onClose }
children={ content }
/>
)}
</ReactCSSTransitionGroup>
);
}
}
let id = 0
export default class Notification {
constructor (content, className) {
let notification = {
id: id++, content, className,
};
notification.onClose = () => {
notifications.splice(notifications.indexOf(notification), 1);
renderNotifications();
};
notifications.push(notification);
renderNotifications();
}
}
class NotificationElement extends React.Component {
constructor(_) {
super(_)
}
render() {
const className = `Notification ${ this.props.className }`
return (
<div className={ className }>
{ this.props.children }
<a className="close-button" onClick={ this.props.onClose }>×</a>
</div>
)
}
}
Every time a notification is added or removed, its corresponding element is added or removed from the children
prop of ReactCSSTransitionGroup
, which can then animate it in or out properly.
You can add transitionAppear={true}
to your <ReactCSSTranstionGroup />
to make it animate the initial render.
It is disabled by default: https://github./facebook/react/blob/master/src/addons/transitions/ReactCSSTransitionGroup.js#L38