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