mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2026-03-13 10:22:08 +08:00
95 lines
2.6 KiB
HTML
95 lines
2.6 KiB
HTML
<link href="../../dist/css/ionic.css" rel="stylesheet">
|
|
<link href="view.css" rel="stylesheet">
|
|
<link href="transition.css" rel="stylesheet">
|
|
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
|
|
|
|
<body ion-app>
|
|
|
|
<div class="view zoom-slide-transition">
|
|
|
|
<div class="container shared-view">
|
|
<div class="tool-bar">
|
|
</div>
|
|
</div>
|
|
|
|
<div class="container">
|
|
|
|
<div class="view" id="view1">
|
|
<div class="container">
|
|
|
|
<div class="tool-bar">
|
|
View 1
|
|
<button>asdfsdf</button>
|
|
</div>
|
|
|
|
<div class="content">
|
|
<div class="scroll-content">
|
|
<p>view1</p>
|
|
<p><button id="fromView1ToView2">iOS Transition to View 2</button></p>
|
|
<p>The header bg should NOT transition</p>
|
|
<p>Only the header text should transition</p>
|
|
<p>This should be tall and scrollable</p>
|
|
<p>Entire webpage should not bounce when you reach the top/bottom</p>
|
|
<f></f><f></f><f></f><f></f><f></f><f></f><f></f>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
<div class="view hide" id="view2">
|
|
<div class="container">
|
|
|
|
<div class="tool-bar">
|
|
View 2
|
|
</div>
|
|
|
|
<div class="content">
|
|
<div class="scroll-content">
|
|
<p>view2</p>
|
|
<p><button id="fromView2ToView1">iOS Transition to View 1</button></p>
|
|
<p>This is a short view and should not be scrollable</p>
|
|
<p>When returning to view 1, make sure it can still scroll without
|
|
having to click view 1</p>
|
|
<p>Entire webpage should not bounce when trying to scroll</p>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</body>
|
|
|
|
|
|
<script src="jquery.min.js"></script>
|
|
<script>
|
|
$('#fromView1ToView2').click(function() {
|
|
$('#view1').attr('class', 'view view-center');
|
|
$('#view2').attr('class', 'view view-bottom-right');
|
|
|
|
setTimeout(function(){
|
|
$('#view1').attr('class', 'view view-zoom-out');
|
|
$('#view2').attr('class', 'view view-center');
|
|
}, 32);
|
|
});
|
|
|
|
$('#fromView2ToView1').click(function() {
|
|
$('#view1').attr('class', 'view view-zoom-out');
|
|
$('#view2').attr('class', 'view view-center');
|
|
|
|
setTimeout(function(){
|
|
$('#view1').attr('class', 'view view-center');
|
|
$('#view2').attr('class', 'view view-bottom-right');
|
|
|
|
$('#view1 .scroll-content').css({
|
|
top: (Math.random() / 10000) + 'px'
|
|
});
|
|
|
|
}, 32);
|
|
});
|
|
</script>
|