科尔多瓦没有给出想要的结果

时间：2017-07-04 23:41:10

标签： javascript android html css cordova

尝试使用Cordova做一个应用程序，但我没有想要的结果。

这是构建之前的应用程序（在Google Chrome中使用涟漪显示） enter image description here

这是构建后的渲染（在我的手机中） enter image description here

不介意背景图片，我只需要设计一个合适的尺寸。

其他不能正常工作的东西，所有的动画，要么没有正确的动画持续时间，要么没有正确的尺寸播放（比如点击它时用另一种颜色填充按钮就会超出边界）。

HTML：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height">
    <title>LoginPage</title>
    <link rel="stylesheet" href="css/ExternalCSS/materialize.min.css">
    <link rel="stylesheet" href="css/ExternalCSS/semantic.min.css">
    <link rel="stylesheet" href="css/MyCSS/LoginPage.css">
</head>
<body id="body" class="verticalDiv">
    <div id="title" class="verticalDiv">
        <h1>SIGN IN</h1>
        <div class="horizentalDiv">
            <div class="verticalDiv">
                <svg><line x1="10" y1="0" x2="96" y2="0"/></svg>
                <svg><line x1="10" y1="0" x2="96" y2="0"/></svg>
            </div>
            <h6 style="margin: 0px 0px 0px 0px;">TO</h6>
            <div class="verticalDiv">
                <svg><line x1="5" y1="0" x2="90" y2="0"/></svg>
                <svg><line x1="5" y1="0" x2="90" y2="0"/></svg>
            </div>
        </div>
        <h3>YOUR ACCOUNT</h3>
    </div>
    <!-- FIN DU TEXTE -->
    <div id="informations" class="verticalDiv" >
        <div id="formulaireEmail">
            <div class="horizentalDiv">
                <input type="text" placeholder=" Email adress">
            </div>
        </div>
        <div id="FormulairePassword">
            <div class="horizentalDiv">
                <input type="password" placeholder=" Password">
            </div>
        </div>
        <div id="FormulaireConfirmationPassword">
            <div class="horizentalDiv">
                <input type="password" placeholder=" Password confirmation" style="animation-duration: 1s; display: none">
            </div>
        </div>
        <div id="buttons" class="horizentalDiv">
            <button class="horizentalDiv btn-large btn-floating waves-effect waves-light cyan">
                <img src="img/iconeConnexion.png" style="width: 25px; ">
            </button>
            <button class="horizentalDiv btn-large btn-floating pulse scale-transition cyan scale-in">
                <img src="img/iconeInscription.png" style="width: 25px;">
            </button>
            <button class="horizentalDiv btn-large btn-floating scale-transition cyan pulse scale-out">
                <img src="img/iconeAccueil.png" style="width: 25px;">
            </button>
        </div>
    </div>
    <div id="fbgmailsignin" class="verticalDiv">
        <button class="horizentalDiv fbgmail waves-effect waves-light ">
            <img src="img/FB.png">
        </button>
        <button class="horizentalDiv fbgmail waves-effect waves-light ">
            <img src="img/Gmail.png">
        </button>
    </div>
</body>
<script src="js/ExternalJS/jquery.min.js"></script>
<script src="js/ExternalJS/semantic.min.js"></script>
<script src="js/ExternalJS/materialize.min.js"></script>
<script src="js/MyJS/LoginPage.js"></script>

CSS：

html{  width: 100%;  height: 100%;  }
#body {
    position: absolute;
    width: 100%;
height: 100%;
left: 0px;
top: 0px;
margin: 0px 0px 0px 0px;
background-repeat: no-repeat;
background-image: linear-gradient(2deg, rgba(0, 206, 155, 0.3) 0%, rgba(0,         196, 208, 0.3) 100%), url("../../img/Background-image.png");
justify-content: space-around;
}
svg{  width: 100px;  height: 2px;  }
line{  stroke: rgb(255,255,255);  }
::-webkit-input-placeholder{  color: rgba(255,255,255,0.4);  }
h1,h2,h3,h4,h5,h6{  color: white;  margin: 5px 5px 0px 5px;  }
hr{  margin: 5px 0px 0px 0px;  }
input{  color: rgba(255,255,255,0.8);  font-size: 12pt;  }
/* My Classes */
.horizentalDiv{
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    margin: 0px 0px 0px 0px;
    padding: 0px 0px 0px 0px;
}
.verticalDiv{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin: 0px 0px 0px 0px;
    padding: 0px 0px 0px 0px;
}

/* DIV Text au millieu */
#title {animation-duration: 1.5s;}
#title h1{  margin: 0px 0px 0px 0px;  font-size: 40pt;  }
#title h6{  font-size: 8pt;  }
#title h3{  font-size: 14pt;  }
/* DIV Sign in */
#informations input{ padding: 0px 0px 0px 40px; }
#informations input[type="text"]{
    background: url("../../img/iconeEmail.png");
    background-repeat: no-repeat;
    background-position: left;
}
#informations input[type="password"]{
    background: url("../../img/iconePass.png");
    background-repeat: no-repeat;
    background-position: left;
}
/* Sign up / Sign in buttons */
#buttons button:nth-child(1),#buttons button:nth-child(2){  margin-right: 10px;  }
/* Gmail/FB Container */

#fbgmailsignin button:nth-child(1){  margin-bottom: 5px;  }
.fbgmail{  border-radius: 24px;  }

JavaScript的：

LoginPage = {
launch: function(){
    this.initListeners();
},

initListeners: function(){
    var bouttonLogin = document.querySelector("#buttons button:nth-child(1)");
        bouttonLogin.addEventListener("click", function(){
            $("#buttons button:nth-child(1)").transition('jiggle');

        });
    var title = document.querySelector("#title");
        title.addEventListener("animationend", function(){
            LoginPage.Animation.animateTitleNext();
        });
    var bouttonInscription = document.querySelector("#buttons button:nth-child(2)");
        bouttonInscription.addEventListener("click", function(){
            LoginPage.Animation.animateButtonSignup(false);
            LoginPage.Animation.animerBouttonAccueil(true);
            LoginPage.Animation.animatePasswordConfirmation();
            LoginPage.Animation.animateTitle();
            LoginPage.Animation.animateFBGmail();
        });
    var bouttonAccueil = document.querySelector("#buttons button:nth-child(3");
        bouttonAccueil.addEventListener("click", function(){
            LoginPage.Animation.animerBouttonAccueil(false);
            LoginPage.Animation.animateButtonSignup(true);
            LoginPage.Animation.animatePasswordConfirmation();
            LoginPage.Animation.animateTitle();
            LoginPage.Animation.animateFBGmail();
        });
    var bouttonFB = document.querySelector("#fbgmailsignin button:nth-child(1)");
        bouttonFB.addEventListener("click", function(){
            $("#fbgmailsignin button:nth-child(1)").transition('jiggle');
        })
    var bouttonGmail = document.querySelector("#fbgmailsignin button:nth-child(2)");
        bouttonGmail.addEventListener("click", function(){
            $("#fbgmailsignin button:nth-child(2)").transition('jiggle');
        })
},

Animation: {
    firstTime: true,
    stop: false,

    animateTitle: function(){
        $("#title").transition('swing down');
        this.firstTime = !this.firstTime;
        this.stop = false;
    },
    animateTitleNext: function(){
        if(!this.stop){
            $("#title").transition('swing down');
            if(!this.firstTime) {
                document.querySelector("#title h1").innerHTML = "SIGN UP";
                document.querySelector("#title h6").innerHTML = "AND";
                document.querySelector("#title h3").innerHTML = "ENJOY !";
            }
            else {
                document.querySelector("#title h1").innerHTML = "SIGN IN";
                document.querySelector("#title h6").innerHTML = "TO";
                document.querySelector("#title h3").innerHTML = "YOUR ACCOUNT";
            }
            this.stop = true;
        }
    },
    animatePasswordConfirmation: function(){
        if(this.firstTime)
            $("#FormulaireConfirmationPassword input").transition("horizontal flip");
        else $("#FormulaireConfirmationPassword input").transition("vertical flip");
    },
    animateFBGmail: function(){
        if(this.firstTime){
            $("#fbgmailsignin button:nth-child(1)").transition('fly left');
            $("#fbgmailsignin button:nth-child(2)").transition('fly right');
        }
        else {
            $("#fbgmailsignin button:nth-child(1)").transition('fly right');
            $("#fbgmailsignin button:nth-child(2)").transition('fly left');
        }
    },
    animateButtonSignup: function(repere){
        var bouttonInscription = document.querySelector("#buttons button:nth-child(2)");
        if(repere){
            bouttonInscription.classList.remove("scale-out");
            bouttonInscription.classList.add("scale-in");
        }
        else{
            bouttonInscription.classList.remove("scale-in");
            bouttonInscription.classList.add("scale-out");
        }
    },
    animerBouttonAccueil: function(repere){
        var bouttonAccueil = document.querySelector("#buttons button:nth-child(3)");
            if(repere){
                bouttonAccueil.classList.remove("scale-out");
                bouttonAccueil.classList.add("scale-in");
            }
            else{
                bouttonAccueil.classList.remove("scale-in");
                bouttonAccueil.classList.add("scale-out");
            }
        }
    }
}
LoginPage.launch();

这是想要测试它的人的项目链接。 https://www.fichier-rar.fr/2017/07/05/myproject/

提前致谢...

1 个答案:

答案 0 :(得分：1)

它看起来不是一个响应式网站，您的cordova应用程序中的容器比浏览器更大。您可以在Android案例中的Chrome或iOS案例中的Safari中调试您的应用程序。

请注意效果，请确保scale-out和scale-in类的前缀为-web-kit，但这种方法不起作用。

相关问题
最新问题