尝试使用 Semantic 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
});
最佳答案
这应该有效。
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 - 更改动画javascript后的文本内容，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/44891851/