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

试图用Cordova做一个应用程序，但我没有得到想要的结果

这是我在构建之前的应用程序（在google chrome中使用ripple显示）

这是构建后的渲染（在我的手机中）

不要介意背景图像，我只需要设计一个合适大小的

其他不好用的东西，所有的动画，要么没有正确的动画持续时间，要么没有正确的大小播放（比如当点击按钮超出其边框时，用另一种颜色填充按钮）

HTML:

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();

这是为那些想要测试它的人提供的项目链接。

---

提前感谢…

它看起来不是一个响应速度快的站点，并且cordova应用程序中的容器比浏览器中的容器大。你可以在Android环境下用Chrome或iOS环境下用Safari调试你的应用程序

---

根据效果，确保

scale out

和

scale in

类的转换使用前缀-web kit，否则不起作用。

-web kit在动画持续时间内起作用，谢谢（y）现在得到了这些：1-animationend回调函数不起作用我甚至尝试添加webkitAnimationEnd 2-所有类都实现了prefix-web工具包，但仍然存在一些动画问题（单击时用浅色填充按钮）我还可以尝试什么？1。我没有看到动画化的回调，它位于哪里？2.带有clic的动画是在活动的伪类？1-title.addEventListener（“animationend”，function（）{LoginPage.animation.animateTileNext（）；}）上的，但我修复了它，现在没事了，我使用了另一个方法，其中使用了框架语义ui提供的回调方法，使用精细的2波效果波灯光类启用动画，我还通过使用方形按钮而不是圆形按钮来修复它。

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();