How to make ReactCSSTransitionGroup work in PhoneG

2019-08-15 10:29发布

问题:

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