ホーム

JS + CSS でネイティブ風の画面遷移を作る

 

環境

  • js
  • Javascript
  • javascript
  • css
  • CSS3
  • html
  • HTML
  • html5
  • 画面遷移
  • 遷移
  • 画面
  • iOS
  • ipad
  • ネイティブ
  • 側ネイティブ

説明

側ネイティブのアプリを作っていて、中身をウェブ側で作っています。画面遷移する時に、ネイティブアプリみたいに画面遷移(左にウィ〜ンって)したいと思ったのですが、結構面倒臭いんですね、これ。そもそも、ネイティブ仕様に画面遷移させるためのメソッドはあまりないし、あったとしても、urlが変わったりする画面遷移には対応してなかったり、ajaxとか色々使って、なんか色々試行錯誤しようとすると、自分レベルになると学習コストが高くて面倒臭いわけ。つまり、ライムターの宇多丸的にいうとK・U・F・U 工夫が必要なわけです。

そこで考えたのが、htmlのbodyにクラス名をつける。htmlのクラス名に対してcssで画面のサイズや位置を指定しておく。jsでボタンがクリックした時にbodyの位置を移動させる。画面お外側に次の画面のスクショを用意しておく。画面が横遷移で出てきた瞬間に普通にリダイレクトでページ遷移する。複雑なアプリになると、これじゃあ、ダメかもしれませんが(特に次の遷移画面のスクショを用意するところとか。)とりあえず今の僕のアプリには、これで行けそうなんでそうします。下記のgif画像では、ボタンを押した時、一瞬白い画面が見えてしまいますが、ここはサイド調整して、いい感じにネイティブ風に画面遷移しましょう。

on.gif

実装

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
                    "http://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>

Pocket
LinkedIn にシェア

エンジニアにおすすめできる本

Card image cap
リーダブルコード

より良いコードを書くためのシンプルで実践的なテクニック

Card image cap
Webを支える技術

HTTP,URI,HTML,そしてREST

Card image cap
誰でもPythonで作れる

儲かるAIとソフトウェアの作り方

Card image cap
プログラマが知るべき97のこと

現場で使える実践哲学のマスターピース

Card image cap
情熱プログラマー

時代を超えて。ソフトウェア開発者の幸せな生き方

Card image cap
アジャイルサムライ

プログラミング達人開発者への道

Card image cap
Rubyを作った男 まつもとゆきひろ

コードの世界 スーパー・プログラマになる14の思考法

ご提供 sponsor
 

Meee!(ミー)は、ビジネスからプライベート利用まで、個人のスキルを気軽に売り買いできるスキルマーケットです。カテゴリや居住地から、検索することが可能です。

 

ランゲージエクスチェンジは、ネイティブスピーカーと気軽にマッチングできる言語交換プラットフォームです。あなたの地元に住む外国人を探したり、留学や海外移住の前に、現地のネイティブスピーカーと繋がることもできます!

宣伝
 

りょすけトークchは、仕事や私生活をより豊にするYouTubeチャンネルです。文献(本、映画、論文)から役に立つ情報をまとめ、生涯にわたり役に立つ哲学をお届けしています。是非、チャンネル登録してみてね

-ホーム

Copyright© offブログ! , 2021 All Rights Reserved Powered by AFFINGER5.