时间戳

首页 > 解决方案 > 动画仅适用于第一次单击按钮

javascript - 动画仅适用于第一次单击按钮

问题描述

我想创建简单的文本动画。当我单击一个按钮时，文本从完全透明变为完全可见并恢复为透明。我编写了执行动画的代码，但只写了一次。每次单击按钮时，动画都不再起作用：

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>

标签： javascripthtmljquerycss

解决方案

您需要重置动画。使用 event 有一种很好且正确的方法可以做到这一点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>

推荐阅读