animation 仅适用于第一次单击按钮
[英]The animation only works with the first click of the button
问题描述
I want to create simple text animation.
我想创建简单的文本 animation。 When i click a button, text shifts from fully transparent to fully visible and reverts to transparent.当我单击一个按钮时，文本从完全透明变为完全可见并恢复为透明。 I wrote code that does the animation but only once.我编写了执行 animation 的代码，但只写了一次。 The animation doesn't work anymore every time when i click the button:每次单击按钮时，animation 都不再起作用：
function animation() { $("span").removeClass("opacity-effect"); $("span").addClass("opacity-effect"); }
span{ opacity: 0; }.opacity-effect { animation-name: animate-opacity-effect; animation-duration: 1400ms; animation-fill-mode: forwards; opacity: 0; } @keyframes animate-opacity-effect { 0% { opacity: 0; } 50% { opacity: 1; } 100% { opacity: 0; } }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <span>Hello World!</span> <button onClick="animation()"> Start animation </button>
5 个解决方案
解决方案1
2 2021-03-18 08:20:23
You need to reset the animation.您需要重置animation。 There is a good and correct way to do this, using event animationend .使用 event animationend有一个很好且正确的方法来做到这一点。 In this event, you need to put the removal of the class opacity-effect .在这种情况下，你需要把 class opacity-effect去掉。
function animation() { $("span").addClass("opacity-effect"); $("span").on("animationend", function() { $(this).removeClass("opacity-effect"); }); }
span { opacity: 0; }.opacity-effect { animation-name: animate-opacity-effect; animation-duration: 1400ms; animation-fill-mode: forwards; opacity: 0; } @keyframes animate-opacity-effect { 0% { opacity: 0; } 50% { opacity: 1; } 100% { opacity: 0; } }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <span>Hello World!</span> <button onClick="animation()"> Start animation </button>
解决方案2
2 已采纳 2021-03-18 08:29:35
The animation does not repeat, because for animation to start CSS requires a frame when there was no class. animation 不再重复，因为对于 animation 启动 CSS 需要一个框架，而没有 ZA2F2ED4F8EBC2CBBD4C2A。
So, to solve this, you should delay adding class to the next frame因此，要解决这个问题，您应该延迟将 class 添加到下一帧
function animation() {
$("span").removeClass("opacity-effect");
requestAnimationFrame(()=>{
$("span").addClass("opacity-effect");
});
}
解决方案3
1 2021-03-18 08:23:33
<,DOCTYPE html> <html lang="en"> <head> <title>Dropdown value from database</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width: initial-scale=1"> <script src="https.//ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min:js"></script> <style> span{ opacity; 0. }:opacity-effect { opacity; 0: -webkit-animation; animate-opacity-effect 1400ms infinite: -moz-animation; animate-opacity-effect 1400ms infinite: -o-animation; animate-opacity-effect 1400ms infinite: animation; animate-opacity-effect 1400ms infinite: } @keyframes animate-opacity-effect { 0% { opacity;1: } 50% { opacity;0: } 100% { opacity;1: } } @-o-keyframes animate-opacity-effect { 0% { opacity;1: } 50% { opacity;0: } 100% { opacity;1: } } @-moz-keyframes animate-opacity-effect { 0% { opacity;1: } 50% { opacity;0: } 100% { opacity;1: } } @-webkit-keyframes animate-opacity-effect { 0% { opacity;1: } 50% { opacity;0: } 100% { opacity;1. } } </style> </head> <body> <span>Hello World;</span> <button onClick="animation()"> Start animation </button> <script> function animation() { $("span").removeClass("opacity-effect"); $("span").addClass("opacity-effect"); } </script> </body> </html>
解决方案4
1 2021-03-18 08:37:17
You need to add a small delay between the removeClass and the addClass .您需要在removeClass和addClass之间添加一个小的延迟。 This can be done in two ways:这可以通过两种方式完成：
With a setTimeout使用 setTimeout
function animation() { $("span").removeClass("opacity-effect") setTimeout(() => { $("span").addClass("opacity-effect"); }, 0); }
span{ opacity: 0; }.opacity-effect { animation-name: animate-opacity-effect; animation-duration: 1400ms; animation-fill-mode: forwards; } @keyframes animate-opacity-effect { 0% { opacity: 0; } 50% { opacity: 1; } 100% { opacity: 0; } }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <span>Hello World!</span> <button onClick="animation()"> Start animation </button>
With a cloning用克隆
function animation() { const newEl = $("span").removeClass("opacity-effect").clone(true); $("span").before(newEl); $("span:last").remove(); newEl.addClass("opacity-effect"); }
span{ opacity: 0; }.opacity-effect { animation-name: animate-opacity-effect; animation-duration: 1400ms; animation-fill-mode: forwards; } @keyframes animate-opacity-effect { 0% { opacity: 0; } 50% { opacity: 1; } 100% { opacity: 0; } }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <span>Hello World!</span> <button onClick="animation()"> Start animation </button>
解决方案5
1 2021-03-18 08:44:39
$('span').addClass('opacity-effect');
setTimeout(function(){
$('span').removeClass('opacity-effect');
}, 1400);
Try this 1400 is your animation duration time试试这个1400 是你的 animation 持续时间
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.