diff --git a/examples/src/standalone.html b/examples/src/standalone.html index 289fe162..9661b75a 100644 --- a/examples/src/standalone.html +++ b/examples/src/standalone.html @@ -24,7 +24,7 @@ <script src="https://unpkg.com/react-dom@15.6.1/dist/react-dom.js"></script> <script src="https://unpkg.com/prop-types@15.5.10/prop-types.js"></script> <script src="https://unpkg.com/aphrodite/dist/aphrodite.umd.min.js"></script> - <script src="https://cdnjs.cloudflare.com/ajax/libs/react-transition-group/1.1.3/react-transition-group.js"></script> + <script src="https://cdnjs.cloudflare.com/ajax/libs/react-transition-group/2.0.0/react-transition-group.js"></script> <script src="https://unpkg.com/react-photo-gallery@6.0.13/dist/react-photo-gallery.min.js"></script> <script src="https://rawgit.com/neptunian/react-scrolllock/master/dist/react-scrolllock.min.js"></script> <script src="https://unpkg.com/react-images@0.5.10/dist/react-images.min.js"></script> diff --git a/package.json b/package.json index ed19c06c..ace9fa8e 100644 --- a/package.json +++ b/package.json @@ -14,7 +14,7 @@ "aphrodite": "^0.5.0", "prop-types": "^15.6.0", "react-scrolllock": "^2.0.1", - "react-transition-group": "^1.1.3" + "react-transition-group": "2" }, "devDependencies": { "babel-cli": "^6.26.0", diff --git a/src/components/Portal.js b/src/components/Portal.js index 5cfd52da..bea8b5bc 100644 --- a/src/components/Portal.js +++ b/src/components/Portal.js @@ -1,6 +1,6 @@ import PropTypes from 'prop-types'; import React, { Component } from 'react'; -import { CSSTransitionGroup } from 'react-transition-group'; +import { CSSTransition, TransitionGroup } from 'react-transition-group'; import { render, unmountComponentAtNode } from 'react-dom'; import PassContext from './PassContext'; @@ -30,13 +30,11 @@ export default class Portal extends Component { <PassContext context={this.context}> <div> <style>{styles}</style> - <CSSTransitionGroup - component="div" - transitionName="fade" - transitionEnterTimeout={duration} - transitionLeaveTimeout={duration} - {...this.props} - /> + <TransitionGroup {...this.props}> + <CSSTransition timeout={{ enter: duration, exit: duration }} classNames="fade"> + {this.props.children} + </CSSTransition> + </TransitionGroup> </div> </PassContext>, this.portalElement