fix(CSSTransition): done classname for appearing

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);

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(
+        <CSSTransition
+          appear
+          in
+          timeout={10}
+          classNames="test"
+          onEnter={(node) => {
+            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();
+          }}
+        >
+          <div/>
+        </CSSTransition>
+      )
+    });
+
+    it('should apply custom classNames names', done => {
+      let count = 0;
+      mount(
+        <CSSTransition
+          appear
+          in
+          timeout={10}
+          classNames={{
+            appear: 'custom',
+            appearActive: 'custom-super-active',
+            appearDone: 'custom-super-done',
+          }}
+          onEnter={(node) => {
+            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();
+          }}
+        >
+          <div/>
+        </CSSTransition>
+      );
+    });
+  });
+
   describe('exiting', ()=> {
     let instance;