diff --git a/src/CSSTransition.js b/src/CSSTransition.js
index c5b51f5a..6d6a9729 100644
--- a/src/CSSTransition.js
+++ b/src/CSSTransition.js
@@ -25,6 +25,7 @@ const propTypes = {
* classNames={{
* appear: 'my-appear',
* appearActive: 'my-active-appear',
+ * appearDone: 'my-done-appear',
* enter: 'my-enter',
* enterActive: 'my-active-enter',
* enterDone: 'my-done-enter',
@@ -50,6 +51,7 @@ const propTypes = {
* @type {string | {
* appear?: string,
* appearActive?: string,
+ * appearDone?: string,
* enter?: string,
* enterActive?: string,
* enterDone?: string,
@@ -147,7 +149,9 @@ class CSSTransition extends React.Component {
}
onEntered = (node, appearing) => {
- const { doneClassName } = this.getClassNames('enter');
+ const { doneClassName } = this.getClassNames(
+ appearing ? 'appear' : 'enter'
+ );
this.removeClasses(node, appearing ? 'appear' : 'enter');
addClass(node, doneClassName);
diff --git a/test/CSSTransition-test.js b/test/CSSTransition-test.js
index 6d4a1e40..744cbbd7 100644
--- a/test/CSSTransition-test.js
+++ b/test/CSSTransition-test.js
@@ -113,6 +113,71 @@ describe('CSSTransition', () => {
});
});
+ describe('appearing', () => {
+
+ beforeEach(() => {
+ });
+
+ it('should apply classes at each transition state', done => {
+ let count = 0;
+
+ mount(
+ {
+ count++;
+ expect(node.className).toEqual('test-appear');
+ }}
+ onEntering={(node) => {
+ count++;
+ expect(node.className).toEqual('test-appear test-appear-active');
+ }}
+ onEntered={(node) => {
+ expect(node.className).toEqual('test-appear-done');
+ expect(count).toEqual(2);
+ done();
+ }}
+ >
+
+
+ )
+ });
+
+ it('should apply custom classNames names', done => {
+ let count = 0;
+ mount(
+ {
+ count++;
+ expect(node.className).toEqual('custom');
+ }}
+ onEntering={(node) => {
+ count++;
+ expect(node.className).toEqual('custom custom-super-active');
+ }}
+ onEntered={(node) => {
+ expect(node.className).toEqual('custom-super-done');
+ expect(count).toEqual(2);
+ done();
+ }}
+ >
+
+
+ );
+ });
+ });
+
describe('exiting', ()=> {
let instance;