JoeTheDave

// So instead of this
import ReactCSSTransitionGroup from 'react-addons-css-transition-group';

// Use this
import { CSSTransitionGroup } from 'react-transition-group'

JoeTheDave

{"lastUpload":"2017-10-08T05:17:03.032Z","extensionVersion":"v2.8.2"}

JoeTheDave

'use strict';

const appUserRepository = require('../data/repositories/appUserRepository');

const saveAppUser = (profile) => {
  return new Promise((resolve, reject) => {
    Promise.resolve().then(() => {
      return appUserRepository.getAppUserByFacebookId(profile.id);
    }).then((appUser) => {
      if (appUser) {

JoeTheDave

.box {
  background-color: yellow;
  border: solid 1px black;
  height: 100px;
  width: 100px;
  opacity: 1.0;
  box-sizing: border-box;
  transition: height 500ms 0ms, opacity 500ms 500ms;
}

JoeTheDave

.todo-item {
  width: 100px;
  height: 100px;
  background-color: red;
  float: left;
  border: solid 2px white;
  box-sizing: border-box;
}

.example-enter {

JoeTheDave

import React from 'react';
import ReactCSSTransitionGroup from 'react-addons-css-transition-group';

const Example = ({items, removeItemHandler}) => {
  return (
    <div>
      <ReactCSSTransitionGroup transitionName="example" transitionEnterTimeout={700} transitionLeaveTimeout={700}>
        {items.map(function(item) {
          return (
            <div key={item.id} className="todo-item" onClick={removeItemHandler.bind(null, item)}>

JoeTheDave

.example-component {
  width: 100px;
  height: 100px;
  background-color: red;
  -webkit-transition: 0.5s;
  -moz-transition: 0.5s;
  -o-transition: 0.5s;
  transition: 0.5s;
  opacity: 0;
  visibility: hidden; 

JoeTheDave

import React from 'react';

const ExampleComponent = ({show}) => {
  const componentClasses = ['example-component'];
  if (show) { componentClasses.push('show'); }
  
  return (
    <div className={componentClasses.join(' ')}></div>
  );
};

JoeTheDave

import React from 'react';
import {findDOMNode} from 'React-dom';

class ExampleComponent extends React.Component{
    constructor (props) {
        super(props);
    }

    componentWillReceiveProps(nextProps) {
      if (nextProps.visible !== this.props.visible) {