科尔多瓦没有给出想要的结果
Posted
技术标签:
【中文标题】科尔多瓦没有给出想要的结果【英文标题】：Cordova is not giving the wanted result 【发布时间】：2017-12-08 11:22:27 【问题描述】：尝试使用 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;
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】：它看起来不是一个响应式站点，并且您的 Cordova 应用程序中的容器比浏览器大。您可以在 android 的 Chrome 或 ios 的 Safari 中调试您的应用。
关于效果，请确保 scale-out 和 scale-in 类的转换带有前缀 -web-kit，否则这不起作用。
【讨论】：
-web-kit 为动画持续时间工作，谢谢（y）现在得到那些：1-animationend 回调函数不起作用我什至尝试添加 webkitAnimationEnd 2-所有类都实现了前缀 - web-kit ，但仍然有一些动画问题（点击时用浅色填充按钮）我还能尝试什么？ 1.我没有看到动画回调，在哪里？ 2. 带有 clic 的动画在活动伪类上？ 1- title.addEventListener("animationend", function() LoginPage.Animation.animateTitleNext(); ) 但我修好了，现在很好，我用了另一种方法，他们的 where 回调我使用的框架 sematic ui 提供的方法，工作正常 2-waves-effect waves-light classes 启用动画，我也通过使用方形按钮而不是圆形按钮来修复它。以上是关于科尔多瓦没有给出想要的结果的主要内容，如果未能解决你的问题，请参考以下文章