Question

尝试使用语义UI框架执行简单的挥动动画。我希望文本摆动，然后更改其内容，然后再次摆动以再次出现在屏幕上。问题在于，即使在改变内容的指令到来之后，在第一次挥杆结束之前执行其内容的改变。我希望它摆动 - ＆gt;消失 - ＆gt;改变其内容 - ＆gt;再次摆动再次出现。提前谢谢......

<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后更改文本内容

1 个答案: