jjzjj

javascript - 使关键帧在单击时重新启动

coder 2024-07-25 原文

我有使用关键帧 float 的气泡，但它们是按钮，我也想在单击时消失，然后让它在 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>

最佳答案

所提供的片段中存在一些问题:

  • 不包括 jQuery 库。
  • $(document).ready wrapper 写错了(应该按照Roamer-1888的回答写的，事件handlers应该直接通过JS附加，这其实是最好的做法)使用内联属性。

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

  • 一旦无限动画开始，它将继续运行直到动画从元素中移除。因此，即使使用 opacity: 0 隐藏它，动画仍在后台运行。
  • 要重新启动 CSS 动画，唯一可能的方法是删除元素上的动画并在延迟后重新添加。

  • 以上不能用 mousedown 和 mouseup 事件完成，因为当动画被移除时(在 mousedown 上)元素会消失回到原来的位置，你的鼠标指针很可能不再位于元素上。这意味着 mouseup 事件不会被触发，因为它仅在鼠标仍在元素上时触发。

    From jQuery website: The mouseup event is sent to an element when the mouse pointer is over the element, and the mouse button is released.

  • 因此解决方案是执行以下操作:

    • 单独为 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 通常是一种不好的做法，因此我不推荐这种重新启动动画的方式。

From Animations Spec: CSS Animations affect computed property values. During the execution of an animation, the computed value for a property is controlled by the animation. This overrides the value specified in the normal styling system. Animations override all normal rules, but are overriden by !important rules.

关于javascript - 使关键帧在单击时重新启动，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/34446704/

javascript关键codebubble_cluster_one34jquerycsscss-animations

有关javascript - 使关键帧在单击时重新启动的更多相关文章

  1. ruby - 如何在续集中重新加载表模式？ - 2

    鉴于我有以下迁移:Sequel.migrationdoupdoalter_table:usersdoadd_column:is_admin,:default=>falseend#SequelrunsaDESCRIBEtablestatement,whenthemodelisloaded.#Atthispoint,itdoesnotknowthatusershaveais_adminflag.#Soitfails.@user=User.find(:email=>"admin@fancy-startup.example")@user.is_admin=true@user.save!ende

  2. ruby-on-rails - active_admin 目录中的常量警告重新声明 - 2

    我正在使用active_admin，我在Rails3应用程序的应用程序中有一个目录管理，其中包含模型和页面的声明。时不时地我也有一个类，当那个类有一个常量时，就像这样:classFooBAR="bar"end然后，我在每个必须在我的Rails应用程序中重新加载一些代码的请求中收到此警告:/Users/pupeno/helloworld/app/admin/billing.rb:12:warning:alreadyinitializedconstantBAR知道发生了什么以及如何避免这些警告吗？ 最佳答案 在纯Ruby中:classA

  3. ruby-on-rails - 启动 Rails 服务器时 ImageMagick 的警告 - 2

    最近，当我启动我的Rails服务器时，我收到了一长串警告。虽然它不影响我的应用程序，但我想知道如何解决这些警告。我的估计是imagemagick以某种方式被调用了两次？当我在警告前后检查我的git日志时。我想知道如何解决这个问题。-bcrypt-ruby(3.1.2)-better_errors(1.0.1)+bcrypt(3.1.7)+bcrypt-ruby(3.1.5)-bcrypt(>=3.1.3)+better_errors(1.1.0)bcrypt和imagemagick有关系吗？/Users/rbchris/.rbenv/versions/2.0.0-p247/lib/ru

  4. ruby - 在 Ruby 中重新分配常量时抛出异常？ - 2

    我早就知道Ruby中的“常量”(即大写的变量名)不是真正常量。与其他编程语言一样，对对象的引用是唯一存储在变量/常量中的东西。(侧边栏:Ruby确实具有“卡住”引用对象不被修改的功能，据我所知，许多其他语言都没有提供这种功能。)所以这是我的问题:当您将一个值重新分配给常量时，您会收到如下警告:>>FOO='bar'=>"bar">>FOO='baz'(irb):2:warning:alreadyinitializedconstantFOO=>"baz"有没有办法强制Ruby抛出异常而不是打印警告？很难弄清楚为什么有时会发生重新分配。 最佳答案

  5. UE4 源码阅读：从引擎启动到Receive Begin Play - 2

    一、引擎主循环UE版本：4.27一、引擎主循环的位置：Launch.cpp:GuardedMain函数二、、GuardedMain函数执行逻辑：1、EnginePreInit：加载大多数模块int32ErrorLevel=EnginePreInit(CmdLine);PreInit模块加载顺序：模块加载过程：（1）注册模块中定义的UObject，同时为每个类构造一个类默认对象（CDO，记录类的默认状态，作为模板用于子类实例创建）（2）调用模块的StartUpModule方法2、FEngineLoop::Init()1、检查Engine的配置文件找出使用了哪一个GameEngine类（UGame

  6. ruby - Ruby 的 AST 中的 'send' 关键字是什么意思？ - 2

    我正在尝试学习Ruby词法分析器和解析器(whitequarkparser)以了解更多有关从Ruby脚本进一步生成机器代码的过程。在解析以下Ruby代码字符串时。defadd(a,b)returna+bendputsadd1,2它导致以下S表达式符号。s(:begin,s(:def,:add,s(:args,s(:arg,:a),s(:arg,:b)),s(:return,s(:send,s(:lvar,:a),:+,s(:lvar,:b)))),s(:send,nil,:puts,s(:send,nil,:add,s(:int,1),s(:int,3))))任何人都可以向我解释生成的

  7. ruby - 将全局 $stdout 重新分配给控制台 - ruby - 2

    我正在尝试将$stdout设置为临时写入一个文件，然后返回到一个文件。test.rb:old_stdout=$stdout$stdout.reopen("mytestfile.out",'w+')puts"thisgoesinmytestfile"$stdout=old_stdoutputs"thisshouldbeontheconsole"$stdout.reopen("mytestfile1.out",'w+')puts"thisgoesinmytestfile1:"$stdout=old_stdoutputs"thisshouldbebackontheconsole"这是输出。r

  8. ruby-on-rails - 使用 javascript 更改数据方法不会更改 ajax 调用用户的什么方法？ - 2

    我遇到了一个非常奇怪的问题，我很难解决。在我看来，我有一个与data-remote="true"和data-method="delete"的链接。当我单击该链接时，我可以看到对我的Rails服务器的DELETE请求。返回的JS代码会更改此链接的属性，其中包括href和data-method。再次单击此链接后，我的服务器收到了对新href的请求，但使用的是旧的data-method，即使我已将其从DELETE到POST(它仍然发送一个DELETE请求)。但是，如果我刷新页面，HTML与"new"HTML相同(随返回的JS发生变化)，但它实际上发送了正确的请求类型。这就是这个问题令我困惑的

  9. ruby - Faye WebSocket，关闭处理程序被触发后重新连接到套接字 - 2

    我有一个super简单的脚本，它几乎包含了FayeWebSocketGitHub页面上用于处理关闭连接的内容:ws=Faye::WebSocket::Client.new(url,nil,:headers=>headers)ws.on:opendo|event|p[:open]#sendpingcommand#sendtestcommand#ws.send({command:'test'}.to_json)endws.on:messagedo|event|#hereistheentrypointfordatacomingfromtheserver.pJSON.parse(event.d

  10. ruby-on-rails - 在不重新查询数据库的情况下重新排序 Rails 中的事件记录？ - 2

    例如，假设我有一个名为Products的模型，并且在ProductsController中，我有以下代码用于product_listView以显示已排序的产品。@products=Product.order(params[:order_by])让我们想象一下，在product_listView中，用户可以使用下拉菜单按价格、评级、重量等进行排序。数据库中的产品不会经常更改。我很难理解的是，每次用户选择新的order_by过滤器时，rails是否必须查询，或者rails是否能够以某种方式缓存事件记录以在服务器端重新排序？有没有一种方法可以编写它，以便在用户排序时rails不会重新查询结果

随机推荐