CODEWITHSUNDEEP
javascriptcssreactjsredux
jukka.aalto
jukka.aalto

Reputation: 81

Inline styles and ReactCSSTransitionGroup

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

The component 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)

Upvotes: 3

Views: 6782

Answers (2)

ILiya Lyan
ILiya Lyan

Reputation: 1

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',
            }}

Upvotes: 0

Felipe T.
Felipe T.

Reputation: 637

ReactCSSTransitionGroup is not compatible 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 component 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 component, and that you can pass callbacks to check when a child entered or left your group.

Upvotes: 3

Related Questions