I it possible to use ReactCSSTransitionGroup from react-addons-css-transition-group with React inline styles? If so, how?

The ponent I'm working on:

import React, { Component } from 'react'
import { bindActionCreators } from 'redux'
import { connect } from 'react-redux'
import ReactCSSTransitionGroup from 'react-addons-css-transition-group'

import { removeNotification } from '../actionCreators'
import Notification from './Notification'

const mapStateToProps = state => ({
  notifications: state.notifications
})

const mapDispatchToProps = dispatch => ({
  actions: bindActionCreators({ removeNotification }, dispatch)
})

class Notifications extends Component {
  render() {
    var style = {
      position: 'fixed',
      top: 20,
      right: 20,
      width: 300,
      zIndex: 99
    }
    var tstyle = {
      'notification-enter': {
        visibility: 'hidden',
        transform: 'translate3d(100%,0,0)'
      },
      'notification-leave': {
        visibility: 'visible',
        transform: 'translate3d(0,0,0)'
      },
      'notification-enter-notification-enter-active': {
        visibility: 'visible',
        transform: 'translate3d(0,0,0)',
        transition: 'all 0.4s'
      },
      'notification-leave-notification-leave-active': {
        visibility: 'hidden',
        transform: 'translate3d(100%,0,0)',
        transition: 'all 0.4s'
      }
    }

    return (
      <ul style={style}>
        <ReactCSSTransitionGroup
          style={tstyle}
          transitionName='notification'
          transitionEnterTimeout={400}
          transitionLeaveTimeout={400}>
          {this.props.notifications.map((notification, index) => {
            return <Notification
                    key={index}
                    type={notification.type}
                    message={notification.message}
                    timeout={10000}
                    remove={this.props.actions.removeNotification} />
          })}
        </ReactCSSTransitionGroup>
      </ul>
    )
  }
}

export default connect(mapStateToProps, mapDispatchToProps)(Notifications)

I it possible to use ReactCSSTransitionGroup from react-addons-css-transition-group with React inline styles? If so, how?

The ponent I'm working on:

import React, { Component } from 'react'
import { bindActionCreators } from 'redux'
import { connect } from 'react-redux'
import ReactCSSTransitionGroup from 'react-addons-css-transition-group'

import { removeNotification } from '../actionCreators'
import Notification from './Notification'

const mapStateToProps = state => ({
  notifications: state.notifications
})

const mapDispatchToProps = dispatch => ({
  actions: bindActionCreators({ removeNotification }, dispatch)
})

class Notifications extends Component {
  render() {
    var style = {
      position: 'fixed',
      top: 20,
      right: 20,
      width: 300,
      zIndex: 99
    }
    var tstyle = {
      'notification-enter': {
        visibility: 'hidden',
        transform: 'translate3d(100%,0,0)'
      },
      'notification-leave': {
        visibility: 'visible',
        transform: 'translate3d(0,0,0)'
      },
      'notification-enter-notification-enter-active': {
        visibility: 'visible',
        transform: 'translate3d(0,0,0)',
        transition: 'all 0.4s'
      },
      'notification-leave-notification-leave-active': {
        visibility: 'hidden',
        transform: 'translate3d(100%,0,0)',
        transition: 'all 0.4s'
      }
    }

    return (
      <ul style={style}>
        <ReactCSSTransitionGroup
          style={tstyle}
          transitionName='notification'
          transitionEnterTimeout={400}
          transitionLeaveTimeout={400}>
          {this.props.notifications.map((notification, index) => {
            return <Notification
                    key={index}
                    type={notification.type}
                    message={notification.message}
                    timeout={10000}
                    remove={this.props.actions.removeNotification} />
          })}
        </ReactCSSTransitionGroup>
      </ul>
    )
  }
}

export default connect(mapStateToProps, mapDispatchToProps)(Notifications)

• javascript
• css
• reactjs
• redux

• I'd assume you can just use inline styles as long as you name them correctly, i.e. in your case notification-enter, notification-leave etc. – Thomas Commented Jan 21, 2016 at 1:15
• @Aperçu There is no "error" if the inline styles isn't applied. – jukka.aalto Commented Jan 21, 2016 at 11:27
• @jukka.aalto try to add the style={tstyle} to the Notification ponent and pass it on to the child. – Thomas Commented Jan 21, 2016 at 16:40
• 1 Inline style transitions are currently not supported :( – philk Commented Mar 2, 2016 at 11:38

2 Answers 2

ReactCSSTransitionGroup is not patible with inline styles because it adds or removes class names to/from DOM nodes to trigger the transitions. But you can use ReactTransitionGroup to make your own ponent that does the same thing ReactCSSTransitionGroup does, but with inline styles.

If you don't want to develop your own, you can use one that I wrote some time ago installing it with npm: ReactInlineTransitionGroup.

It has some advantages over ReactCSSTransitionGroup, like the fact that you can write your CSS transitions and not worry about setting timeout properties in the ponent, and that you can pass callbacks to check when a child entered or left your group.

DO THIS

style={{
                // flex: over ? 1 : null,
                display: 'flex',
                width: wide ? 400 : null,
                paddingBottom: wide ? 500 : null,
                border: over ? '4px solid greenyellow' : null,
                borderRadius: wide ? 30 : null,
                paddingVertical: over ? 500 : null,
                background: over ? 'black' : 'white',
                transition:
                    'background 500ms',
                cursor: 'pointer',
            }}

Or if you wanna get multiple properties

style={{
                display: 'flex',
                width: wide ? 400 : null,
                paddingBottom: wide ? 500 : null,
                border: over ? '4px solid greenyellow' : null,
                borderRadius: wide ? 30 : null,
                paddingVertical: over ? 500 : null,
                background: over ? 'black' : 'white',
                transition:
                    'background 500ms, padding 500ms, width 500ms, border 500ms',
                cursor: 'pointer',
            }}