mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2025-08-22 21:48:42 +08:00
87 lines
2.0 KiB
HTML
87 lines
2.0 KiB
HTML
<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>
|
|
|
|
<div class="view ios-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">
|
|
Header
|
|
</div>
|
|
|
|
<div class="tool-bar">
|
|
Sub Header
|
|
</div>
|
|
|
|
<div class="tool-bar">
|
|
Sub Header
|
|
</div>
|
|
|
|
<div class="content">
|
|
<div class="scroll-content">
|
|
<p>view1</p>
|
|
<p><button id="fromView1ToView2">iOS Transition to View 2</button></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">
|
|
Header
|
|
</div>
|
|
|
|
<div class="content">
|
|
<div class="scroll-content">
|
|
<p>view2</p>
|
|
<p><button id="fromView2ToView1">iOS Transition to View 1</button></p>
|
|
</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-right');
|
|
|
|
setTimeout(function(){
|
|
$('#view1').attr('class', 'view view-left');
|
|
$('#view2').attr('class', 'view view-center');
|
|
}, 32);
|
|
});
|
|
|
|
$('#fromView2ToView1').click(function() {
|
|
$('#view1').attr('class', 'view view-left');
|
|
$('#view2').attr('class', 'view view-center');
|
|
|
|
setTimeout(function(){
|
|
$('#view1').attr('class', 'view view-center');
|
|
$('#view2').attr('class', 'view view-right');
|
|
}, 32);
|
|
});
|
|
</script>
|