我正在使用以下代码创建一个移动文本的动画,在ASP.NET Core项目中: http://www.html.am/html-codes/marquees/css-scrolling-text.cfm 动画结束后如何执行js脚本?类似于这样,我想在动画完成后刷新页面。
<script>
function myFunction() {
location.reload();
}
</script>
我正在使用以下代码创建一个移动文本的动画,在ASP.NET Core项目中: http://www.html.am/html-codes/marquees/css-scrolling-text.cfm 动画结束后如何执行js脚本?类似于这样,我想在动画完成后刷新页面。
<script>
function myFunction() {
location.reload();
}
</script>
你真正需要做的就是创建一个Javascript事件监听器:
下面的示例为circle对象创建了一个事件监听器。您可以运行示例以查看实时效果。
此外,所有CSS /圆形的东西只是为了动画效果,您真正需要关注的是JavaScript部分。
var circle = document.getElementsByTagName("circle")[0];
var change = document.getElementById("change");
circle.addEventListener("animationend", function() {
change.innerHTML = "The animation has ended!";
});
circle {
border-radius: 50%;
width: 100px;
height: 100px;
background-color: rgba(0,0,255,0.9);
border: 2px solid black;
position: absolute;
animation: bounce 1.5s;
animation-direction: alternate;
animation-timing-function: cubic-bezier(.5,0.05,1,.5);
animation-fill-mode: forwards;
}
@keyframes bounce {
from {
transform: translate3d(0, 0, 0);
}
to {
transform: translate3d(0, 200px, 0);
}
}
<p id='change'>
This text will change when the animation has ended.
</p>
<circle></circle>