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

+1

android reactjs cordova reactcsstransitiongroup

Mithun ganatra 23 oct. 15 at 8:10

source to share

No one has answered this question yet

See similar questions:

3

Sliding bar for movement with sliding side menu

or similar:

3295

Why is the Android emulator so slow? How can we speed up the development of an Android emulator?

2284

How can I fix 'android.os.NetworkOnMainThreadException'?

1844

How to place text horizontally and vertically in a TextView?

941

How do I create links in a text client?

6

react to routing and django url conflict

3

ReactJS modal components

2

Forwarding clicks are not displayed in CSS transforms.

0

How to make animation work with ReactCSSTransitionGroup?

0

ReactJS, React-Router Getting the previous path

How to get ReactCSSTransitionGroup to work in PhoneGap

More articles: