1

reactjs を使用してページ遷移アニメーション (スライド/スワイプ) を実装しようとしています。ReactCSSTransitionGroupを使用しましたが、ブラウザでは正常に動作しますが、phonegap を使用してビルドし、Android デバイスで試してみると動作しません。私はそれがこのようなものであることを望みます。移行にはReactJsとrackt/reactrouterを使用しています。

開発環境の詳細は以下のとおりです。 オペレーティング システム : Windows 7 PhoneGap バージョン : 4.2.0-0.26.0 ターゲット プラットフォーム : Android

コード スニペットは次のとおりです。

索引.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>

ここに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();
4

0 に答える 0