I am trying to implement the page transition animation (Sliding/Swiping) using reactjs. I have used ReactCSSTransitionGroup it works fine in the browser however doesnt work when i build it using phonegap and try it on my android device. I want it to be something like this. I am using ReactJs and rackt/reactrouter for transition.
Please find the details of Development environment as follows : Operating System : Windows 7 PhoneGap Version : 4.2.0-0.26.0 Target Platform : Android
Here is 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();