尝试使用 Cordova 开发应用程序，但没有得到想要的结果。
这是我在构建之前的应用程序(在谷歌浏览器中使用波纹显示)
这是构建后的效果图(在我的手机中)
不介意背景图片，我只需要设计一个尺寸合适的就可以了。
其他效果不佳的地方，所有的动画，要么没有正确的动画持续时间，要么没有以正确的大小播放(比如当点击按钮超出其边界时用另一种颜色填充按钮).
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/
提前致谢...
最佳答案
它看起来不是响应式站点，并且您的 cordova 应用程序中的容器比浏览器中的容器大。您可以在 Android 情况下的 Chrome 或 iOS 情况下的 Safari 中调试您的应用。
关于效果，请确保 scale-out 和 scale-in 类的过渡带有前缀 -web-kit，否则这不起作用。
关于javascript - Cordova 没有给出想要的结果，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/44915243/