ホーム

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 にシェア



新規webサービスの開発の依頼ならoffテク⭐️

低コストで、Reactなどモダン言語での新規webサービス開発を承ります

-ホーム

Copyright© off , 2020 All Rights Reserved Powered by AFFINGER5.