環境
- js
- Javascript
- javascript
- css
- CSS3
- html
- HTML
- html5
- 画面遷移
- 遷移
- 画面
- iOS
- ipad
- ネイティブ
- 左
- 右
- 側ネイティブ
説明
側ネイティブのアプリを作っていて、中身をウェブ側で作っています。画面遷移する時に、ネイティブアプリみたいに画面遷移（左にウィ〜ンって）したいと思ったのですが、結構面倒臭いんですね、これ。そもそも、ネイティブ仕様に画面遷移させるためのメソッドはあまりないし、あったとしても、urlが変わったりする画面遷移には対応してなかったり、ajaxとか色々使って、なんか色々試行錯誤しようとすると、自分レベルになると学習コストが高くて面倒臭いわけ。つまり、ライムターの宇多丸的にいうとK・U・F・U 工夫が必要なわけです。
そこで考えたのが、htmlのbodyにクラス名をつける。htmlのクラス名に対してcssで画面のサイズや位置を指定しておく。jsでボタンがクリックした時にbodyの位置を移動させる。画面お外側に次の画面のスクショを用意しておく。画面が横遷移で出てきた瞬間に普通にリダイレクトでページ遷移する。複雑なアプリになると、これじゃあ、ダメかもしれませんが（特に次の遷移画面のスクショを用意するところとか。）とりあえず今の僕のアプリには、これで行けそうなんでそうします。下記のgif画像では、ボタンを押した時、一瞬白い画面が見えてしまいますが、ここはサイド調整して、いい感じにネイティブ風に画面遷移しましょう。
実装
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"https://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script>
$(document).ready(function(){
// Using multiple unit types within one animation.
$("#go").click(function(){
$(".className1").animate({
left: "-1500px",
// opacity: 0.4,
// marginLeft: "0.6in",
// fontSize: "3em",
borderWidth: "10px"
}, 1500 );
$("#block2").animate({
left: "0px",
// opacity: 0.4,
// marginLeft: "0.6in",
// fontSize: "3em",
borderWidth: "10px"
}, 1500 );
});
$("#gogo").click(function(){
$(".className1").animate({
left: "-1500px",
// opacity: 0.4,
// marginLeft: "0.6in",
// fontSize: "3em",
borderWidth: "10px"
}, 1500 );
$("#block3").animate({
left: "0px",
// opacity: 0.4,
// marginLeft: "0.6in",
// fontSize: "3em",
borderWidth: "10px"
}, 1500 );
});
});
</script>
<style>
.className1 {
position : absolute;
top : 30px;
left : 10px;
background-color : red;
width : 0px;
height : 0px;
}
#blockblock {
position : absolute;
top : 440px;
left : 10px;
background-color : red;
width : 100px;
height : 100px;
}
#block {
position : absolute;
top : 140px;
left : 10px;
background-color : green;
width : 100px;
height : 100px;
}
#block2 {
position : absolute;
top : 30px;
left : 1500px;
background-color : green;
width : 100%;
height : 100%;
}
#block3 {
position : absolute;
top : 30px;
left : 1500px;
background-color : green;
width : 100%;
height : 100%;
}
</style>
</head>
<body id="bo">
<button id="go">? Run</button>
<button id="gogo">? Run2</button>
<div class="className1">
<div id="block">オブジェクトの配置</div>
<div id="blockblock">オブジェクトの配置block</div>
</div>
<div id="block2">現れる</div>
<div id="block3">現れる2</div>
</body>
</html>
