动画后更改文本内容 javascript

Question

尝试使用语义 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
        });

Answer 1

这应该有效。

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

动画后更改文本内容 javascript

Change text content after animation javascript

html

javascript

animation

semantic-ui