アニメーション後のテキストコンテンツを変更する

セマンティックUIフレームワークを使用して簡単なスイングアニメーションを実行しようとしています。テキストをスイングさせてから内容を変更し、再びスイングして画面に再び表示させたいです。問題は、コンテンツの変更の指示が来ても、最初のスイングが終了する前にコンテンツの変更が実行されることです。スイングしたい - >消える - >コンテンツを変更する - >再びスイングするようにスイングします。事前におかげで...アニメーション後のテキストコンテンツを変更する

<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

transitionendの代わりにanimationendがチャーム（y）のように動作します – Mouley

アニメーション後のテキストコンテンツを変更する

答えて

関連する問題