PhoneGap中的CSS3过渡:Div宽度问题

Question

我正在构建一个PhoneGap/Cordova应用程序,并且有一个简单的代码,使用http://ricostacruz.com/jquery.transit/ 在单击另一个div时显示div.

<style>
#hiddendiv {
    top: -2000px;
    position:absolute;
}
</style>

<script>
$('#clickme').click(
            function() {
            //SHOW DIV
            $('#hiddendiv').transition({ y: '2100px' });
            });
</script>

<!--HTML-->
<div id="hiddendiv">
Lorem Ipsum blah blah blah Loooong piece of text
</div>

<div id="clickme">
Click Me
</div>

它工作正常.问题是,一旦显示#hiddendiv,我就无法在我的设备上滚动.

我的部分原因是页面高度约为500px(实际上并未设置在任何地方),而#hiddendiv高度约为1500px

有谁知道这方面的工作？

Answer 1

如果您在IOS或Android中工作,为什么不在css中使用Webkit转换.如果将body标签的高度设置为100%？

<style>
body {
height: 100%
}

#hiddendiv {
-webkit-transform: translate(0, -2000px);
-webkit-transition: all ease-in 3s;
}
</style>

<script>
   $('#clickme').click(
            function() {
            //SHOW DIV
            $('#hiddendiv').css('-webkit-transform','translate(0, 2100px)');
            });
   </script>

它本身也会更快(至少在iOS上)因为它使用webkit而不是jquery动画.