单击时重新启动关键帧答案

【问题标题】：Making a keyframes restart on click单击时重新启动关键帧
【发布时间】：2015-12-28 01:27:13
【问题描述】：

我有使用关键帧漂浮起来的气泡，但它们是我也想在单击时消失的按钮，然后让它在 0% 时自动重启。我一直在打电话给onmousedown 和onmouseup 来做这件事，但它似乎不起作用。有什么想法吗？

$(document).ready() {
  function Bubbles() {
    $(".bubble_cluster_one").css("opacity", "0");

  }

  function Bubbles2() {
    $("bubble_cluster_one").css("top": "400px", "opacity": "1");

  }
}

.bubble_cluster_one {
  position: absolute;
  margin: 0;
  padding: 0;
  -webkit-animation: bubble_cluster_one 8s infinite;
  left: 150px;
  z-index: +1;
}
.bubble_cluster_one input {
  width: 40px;
  height: 60px;
}
@-webkit-keyframes bubble_cluster_one {
  0% {
    top: 400px;
  }
  100% {
    top: -70px;
  }
}

<div class="bubble_cluster_one">
  <input type="image" src="bubbles_1.png" alt="button" onmousedown="Bubbles()" onmouseup="Bubbles2()">
</div>

【问题讨论】：

标签： javascript jquery css css-animations

【解决方案1】：

所提供的 sn-p 存在一些问题：

不包括 jQuery 库。
$(document).ready wrapper 写错了（应该按照 Roamer-1888 的回答中提到的那样写，并且应该通过 JS 直接附加事件处理程序。这实际上是最好的做法，而不是使用内联属性。

除了这两个之外，以下是关于 CSS 动画需要注意的事项：

一旦无限动画开始，它会继续运行，直到动画从元素中移除。因此，即使使用 opacity: 0 将其隐藏，动画仍在后台运行。
要重新启动 CSS 动画，唯一可行的方法是删除元素上的动画，并在延迟后重新添加。
上面的操作不能用mousedown 和mouseup 事件来完成，因为当动画被移除时（在mousedown），元素会回到原来的位置，你的鼠标指针很可能不再是在元素之上。这意味着mouseup 事件不会被触发，因为它仅在鼠标仍在元素上方时触发。

来自jQuery website：当鼠标指针悬停在元素上时，mouseup 事件被发送到元素，然后释放鼠标按钮。
所以解决办法如下：
- 单独为animation 属性使用特定的类，将这个额外的类添加到元素中。这不是强制性的，但只需添加/删除类方法即可更轻松地添加或删除动画。
- 在元素上使用click事件，首先移除动画类，将opacity设置为0以隐藏元素并在稍稍延迟后（使用setTimeout）将动画类添加回元素并将opacity 设置回 1。

$(document).ready(function() {
  $(".bubble_cluster_one input").on('click', function() {
    $(".bubble_cluster_one").removeClass("animation");
    $(".bubble_cluster_one").css("opacity", "0");
    setTimeout(
      function() {
        $(".bubble_cluster_one").addClass("animation");
        $(".bubble_cluster_one").css("opacity", "1");
      }, 100);
  });
});

.bubble_cluster_one {
  position: absolute;
  margin: 0;
  padding: 0;
  left: 150px;
  z-index: 1;
}
.animation {
  animation: bubble_cluster_one 8s infinite;
}
.bubble_cluster_one input {
  width: 40px;
  height: 60px;
}
@keyframes bubble_cluster_one {
  0% {
    top: 400px;
  }
  100% {
    top: -70px;
  }
}

<!-- prefix free library is only to avoid vendor prefixes -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="bubble_cluster_one animation">
  <input type="image" src="bubbles_1.png" alt="button">
</div>

仅仅在mouseup 上添加top: 400px 是行不通的，因为当CSS 动画运行时，动画会完全控制它正在使用的属性。只有具有!important 的规则才能覆盖动画。在可以避免的情况下使用!important 通常是不好的做法，因此我不会推荐这种重新启动动画的方式。

来自Animations Spec：CSS 动画影响计算的属性值。在动画执行期间，属性的计算值由动画控制。这会覆盖在正常样式系统中指定的值。动画会覆盖所有常规规则，但会被 !important 规则覆盖。

【讨论】：

一如既往的好解决方案！但是我认为如果在基本样式中设置 top: 400px 会更简单 .bubble_cluster_one {top: 400px;} 然后你不需要在jQuery中改变不透明度。当您删除类时，元素将立即移动到初始位置。几分之一秒后将开始移动（在大多数浏览器中，延迟可以为 0。你只需要给它一个重绘的机会）
发现@vals 我也有同样的想法，但是这个有问题的陈述（我也想在点击时消失）让我失望.

【解决方案2】：

你有一个破碎的、不可行的模式。

首先，正确的包装应该是：

$(document).ready(function() {
    ...
});

//or

$(function() {
    ...
});

但如果你这样做了，那么 Bubbles() 和 Bubbles2() 将无法从作为 HTML“属性”附加的事件处理程序中访问。

因此，在 javascript 中附加处理程序：

$(function() {
    function Bubbles() {
        $(this).css("opacity", "0");
    }
    function Bubbles2() {
        $(this).css("top": "400px", "opacity": "1");
    }

    $(".bubble_cluster_one input")
        .on('mousedown', Bubbles)
        .on('mouseup', Bubbles2);
});

或者，直接将气泡发送到屏幕外，无需调整不透明度：

$(document).ready(function() {
    $(".bubble_cluster_one input").on('mousedown', function() {
        $(this).css({ "top": "400px" });
    });
});

注意：这两个示例与您原来的不同之处在于事件处理程序附加到集群包装器，而不是输入元素。您可能需要调整该方面以达到预期的效果。

【讨论】：