更改动画后的文本内容javascript

试图使用语义UI框架执行简单的挥杆动画。我希望文字摆动，然后更改其内容，然后再次摆动以再次出现在屏幕中。问题在于，即使在更改内容的指示来临之后，其内容的改变也会在第一次摆动结束之前执行。我想让它摆动 - >消失 - >改变它的内容 - >再次摆动再次出现。在此先感谢...更改动画后的文本内容javascript

<html lang="en"> 
<head> 
    <meta charset="UTF-8"> 
    <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> 
    <div id="title" class="verticalDiv"> 
     <h1 class="pulse">SIGN IN</h1> 
     <h6 style="margin: 0px 0px 0px 0px;">TO</h6> 
     <h3>YOUR ACCOUNT</h3> 
    </div> 
    <div id="buttons" class="horizentalDiv"> 
      <button class="btn-large btn-floating waves-effect waves-light cyan"></button> 
      <button class="horizentalDiv btn-large btn-floating pulse scale-transition scale-in"> 
    </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>

var bouttonLogin = document.querySelector("#informations button:nth-child(1)"); 
     bouttonLogin.addEventListener("click", function(){ 
      var title = document.querySelector("#title"); 
      $("#bouttons button:nth-child(1)").transition('jiggle'); 
      $("#title").transition('swing down'); // First animation 
      document.querySelector("#title h1").innerHTML = "SIGN UP"; 
      document.querySelector("#title h6").innerHTML = "AND"; 
      document.querySelector("#title h3").innerHTML = "ENJOY !"; 
      $("#title").transition('swing down'); // Second Animation 
     });

来源

2017-07-03 Mouley

这应该工作。

bouttonLogin.addEventListener("click", function() { 
    var title = document.querySelector("#title"); 
    $("#bouttons button:nth-child(1)").transition('jiggle'); 
    $("#title").transition('swing down'); // First animation 
    $("#title").addEventListener("transitionend", function() { 
    document.querySelector("#title h1").innerHTML = "SIGN UP"; 
    document.querySelector("#title h6").innerHTML = "AND"; 
    document.querySelector("#title h3").innerHTML = "ENJOY !"; 
    $("#title").transition('swing down'); // Second Animation 
    }); 
});

来源

2017-07-03 18:28:23 SimonRi

animationend而不是transitionend像魅力（y）一样工作，谢谢你的回答 – Mouley

更改动画后的文本内容javascript

回答

相关问题