fix: pass appear to CSSTransition callbacks (#441)

Based on #144, but with working tests. Fixes#143.

Author: Lazyuki

src/CSSTransition.js

@@ -130,7 +130,7 @@ class CSSTransition extends React.Component {
 addClass(node,className)
 
 if(this.props.onEnter){
-this.props.onEnter(node)
+this.props.onEnter(node,appearing)
 }
 }
 
@@ -142,7 +142,7 @@ class CSSTransition extends React.Component {
 this.reflowAndAddClass(node,activeClassName)
 
 if(this.props.onEntering){
-this.props.onEntering(node)
+this.props.onEntering(node,appearing)
 }
 }
 
@@ -153,7 +153,7 @@ class CSSTransition extends React.Component {
 addClass(node,doneClassName);
 
 if(this.props.onEntered){
-this.props.onEntered(node)
+this.props.onEntered(node,appearing)
 }
 }
 

test/CSSTransition-test.js

@@ -113,6 +113,97 @@ describe('CSSTransition', () => {
 });
 });
 
+describe('appearing',()=>{
+it('should apply appear classes at each transition state',done=>{
+letcount=0;
+mount(
+<CSSTransition
+timeout={10}
+classNames='appear-test'
+in={true}
+appear={true}
+onEnter={(node,isAppearing)=>{
+count++;
+expect(isAppearing).toEqual(true);
+expect(node.className).toEqual('appear-test-appear');
+}}
+onEntering={(node,isAppearing)=>{
+count++;
+expect(isAppearing).toEqual(true);
+expect(node.className).toEqual('appear-test-appear appear-test-appear-active');
+}}
+
+onEntered={(node,isAppearing)=>{
+expect(isAppearing).toEqual(true);
+expect(node.className).toEqual('appear-test-enter-done');
+expect(count).toEqual(2);
+done();
+}}
+>
+<div/>
+</CSSTransition>
+);
+});
+
+it('should not be appearing in normal enter mode',done=>{
+letcount=0;
+mount(
+<CSSTransition
+timeout={10}
+classNames='not-appear-test'
+appear={true}
+>
+<div/>
+</CSSTransition>
+).setProps({
+in: true,
+
+onEnter(node,isAppearing){
+count++;
+expect(isAppearing).toEqual(false);
+expect(node.className).toEqual('not-appear-test-enter');
+},
+
+onEntering(node,isAppearing){
+count++;
+expect(isAppearing).toEqual(false);
+expect(node.className).toEqual('not-appear-test-enter not-appear-test-enter-active');
+},
+
+onEntered(node,isAppearing){
+expect(isAppearing).toEqual(false);
+expect(node.className).toEqual('not-appear-test-enter-done');
+expect(count).toEqual(2);
+done();
+}
+});
+});
+
+it('should not enter the transition states when appear=false',()=>{
+mount(
+<CSSTransition
+timeout={10}
+classNames='appear-fail-test'
+in={true}
+appear={false}
+onEnter={()=>{
+throwError('Enter called!')
+}}
+onEntering={()=>{
+throwError('Entring called!')
+}}
+onEntered={()=>{
+throwError('Entred called!')
+}}
+>
+<div/>
+</CSSTransition>
+);
+});
+
+
+});
+
 describe('exiting',()=>{
 letinstance;