我想创建简单的文本动画。当我单击一个按钮时,文本从完全透明变为完全可见并恢复为透明。我编写了执行动画的代码,但只有一次。每次单击按钮时动画都不再起作用:
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>
答案 0 :(得分:2)
您需要重置动画。使用事件 animationend
有一种很好且正确的方法可以做到这一点。在这种情况下,您需要删除类 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>
答案 1 :(得分:2)
动画不重复,因为在没有类的情况下,动画开始CSS需要一个框架。
所以,要解决这个问题,您应该延迟将类添加到下一帧
function animation() {
$("span").removeClass("opacity-effect");
requestAnimationFrame(()=>{
$("span").addClass("opacity-effect");
});
}
答案 2 :(得分:1)
<!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>
答案 3 :(得分:1)
您需要在 removeClass
和 addClass
之间添加一个小的延迟。这可以通过两种方式完成:
使用 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>
通过克隆
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>
答案 4 :(得分:1)
$('span').addClass('opacity-effect');
setTimeout(function(){
$('span').removeClass('opacity-effect');
}, 1400);
试试这个 1400 是您的动画持续时间