Question

我有一个只是一个简单的绿色方块的课程。我做了一个简单的摇动动画，但我没有设法找到一种方法来点击动画。我已经尝试了jQuery和纯CSS解决方案，到目前为止还没有任何工作。动画：

@keyframes hit {
40% {transform: scale(1,1);transform: rotateX(-20deg);transform: rotateY(20deg);transform:rotate(-5deg);}
60% {transform: scale(1.1,1.1);transform: rotateX(20deg);transform: rotateY(-20deg);        }

上课：

target-container {
animation-name: none;
animation-duration:0.3s;}

我最接近它的工作是使用这个功能：

function hitTarget() {
    target.style.animationName="hit";
    setTimeout(stopAnimation,300);
    function stopAnimation() {
        target.style.animationName="none";
    }
}

target.addEventListener("click",function() {
hitTarget();},false);

Answer 1

您的代码存在一些问题 - 不确定这些问题是否是他们在问题或部分实际代码中工作的结果。所以让我们来看看。

我想我必须修复CSS中的一些语法错误 - 缺少关闭}（括号）。
此外，定义多个transforms只列出单个transform样式的所有变换。与transform: rotate(2deg) scale(1.2)一样。
我们不会传递一个调用hitTarget函数的匿名函数，而是将hitTarget函数作为回调传递给事件监听器。
最后，我建议添加/删除应用动画的CSS类，而不是添加/删除animation-name。

这里全部清理完毕并正常工作：

＆＃13;

function hitTarget(event) {
  const animationClass = "withAnimation";
  event.target.classList.add(animationClass);
  setTimeout(stopAnimation, 300);

  function stopAnimation() {
    event.target.classList.remove(animationClass);
  }
}

document.querySelector(".target-container").addEventListener("click", hitTarget, false);

＆＃13;

@keyframes hit {
  40% {
    transform: scale(1, 1) rotateX(-20deg) rotateY(20deg) rotate(-5deg);
  }
  60% {
    transform: scale(1.1, 1.1) rotateX(20deg) rotateY(-20deg);
  }
}

.target-container {
  width: 100px;
  height: 100px;
  background-color: green;
}

.withAnimation {
  animation-name: hit;
  animation-duration: 0.3s;
}

＆＃13;

<div class="target-container"></div>

＆＃13;

如何将CSS中定义的动画应用于点击类？

1 个答案: