How to get ReactCSSTransitionGroup to work in PhoneGap

Question

How to get ReactCSSTransitionGroup to work in PhoneGap

I am trying to implement a page transition animation (Sliding / Swiping) using reactjs. I used ReactCSSTransitionGroup , it works fine in browser, however doesn't work when I create it with phonegap and try to use it on my android device. I want it to be something like this . I am using ReactJs and rackt / reactrouter to navigate.

For more details on the development environment, see below: Operating system: Windows 7 PhoneGap version: 4.2.0-0.26.0 Target platform: Android

Here are the code snippets:

Index.html

<!DOCTYPE html>
 <html>
 <head></head>
 <body>
    <style type="text/css">
    .example-enter {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        text-align: left;
        -webkit-transform: translate3d(100%, 0, 1px);
        transform: translate3d(100%, 0, 0);
    }

    .example-enter.example-enter-active {
        -webkit-transform: translate3d(0, 0, 1px);
        transform: translate3d(0, 0, 0);
        transition: transform 500ms;
    }

    .example-leave {
    }

    .example-leave.example-leave-active {
        -webkit-transform: translate3d(-100%, 0, 1px);
        transform: translate3d(-100%, 0, 0);
        transition: transform 300ms;
    }

    .example-appear {
    }

    .example-appear.example-appear-active {
    }
</style>
<div id="app">
</div>
<script src="Scripts/bundle.js"></script>
</body>
</html>

Here is Main.js

var React = require('react');
var HomePage = require('./Components/FirstComponent');
var AboutPage = require('./Components/AboutUs');
var HeaderDiv = require('./Components/Header');
var ReactCSSTransitionGroup = require('react-addons-css-transition-group');


var App = React.createClass({
render : function(){
    var Child;

    switch(this.props.reqPage){
        case 'about' : Child = AboutPage; break;
        default : Child = HomePage;
    }

    //console.log("In App Component route = " + this.props.reqPage);

    return (
        <ReactCSSTransitionGroup transitionName="example" transitionEnterTimeout={500} transitionLeaveTimeout={300} >
            <div key={this.props.reqPage}>
                <HeaderDiv />
                <Child />
            </div>
        </ReactCSSTransitionGroup>
    );
}
});

function render(){
    var reqPage = window.location.hash.substr(1);
    console.log("In Render Function reqPage = " + reqPage);
    React.render(<App reqPage={reqPage}/>, document.getElementById('app'));
}

window.addEventListener('hashchange',render);
render();