当前位置: 首页 > 面试题库 >

重新启动CSS3中的动画:是否有比删除元素更好的方法?

商泽宇
2023-03-14
问题内容

我有一个CSS3动画,需要单击才能重新启动。这是一个显示剩余时间的条形图。我正在使用scaleY(0)转换来创建效果。

现在,我需要通过将条恢复到scaleY(1)并重新将其转到scaleY(0)来重新启动动画。我第一次尝试设置scaleY(1)失败,因为要花费相同的15秒才能将其恢复到全长。即使我将持续时间更改为0.1秒,我也需要延迟或链接scaleY(0)的分配,以使补充条完成。对于如此简单的任务,感觉太复杂了。

我还发现了一个有趣的技巧,可以通过从文档中删除元素,然后重新插入其克隆来重新启动动画:http : //css-tricks.com/restart-css-
animation/

它可以工作,但是有更好的方法重新启动CSS动画吗?我正在使用Prototype和Move.js,但我不仅限于它们。


问题答案:

只需animation通过JavaScript 将属性设置为"none",然后设置将属性更改为的超时,即可""再次从CSS继承。



 类似资料:
  • 我已经使用了一段时间,但我遇到了一个错误,其中JSoup自动删除"表"元素,找不到任何解决方案... 如果你导航到这段代码中的链接,你可以看到有多个元素“表”(例如:在“Saison 01(VF)”下,有22个包含“Episode x”的表元素),但是它们在JSOUP输出中不存在... 我试图用一个简单的获取文档,打印它(表元素在那里),用Jsoup解析它,重新打印(表元素不见了),所以我知道这不

  • css 组件 如上代码是我写的效果,有没有更好的写法 (可以的话,最好不要用库,例如react-transition-group)

  • 我正在动画一个或多个div滚动到视图中。我是通过将动画css拆分成几个类(见下文)来做到这一点的。 动画div最初将具有类'.mpact-animated'和'.mpact-animated-pause'。div还将具有以下类之一'.mpact-shake'、'.mpact-heartbeat'或'.mpact-bounce'。这些动画类是由用户选择的,所以我不知道哪一个是要实现的。 当页面滚动时

  • 问题内容: 在css3动画的情况下,有什么方法可以实现回调函数?如果使用Javascript动画,则可能会在CSS3中找到实现它的方法,但找不到任何方法。 我可以看到的一种方法是在动画持续时间之后执行回调,但是并不能确保始终在动画结束后立即调用它。这将取决于浏览器UI队列。我想要一个更强大的方法。有什么线索吗? 问题答案: 就在这里。回调是一个事件,因此您必须添加事件侦听器才能捕获它。这是jQue

  • 问题内容: 我想在我的WP博客中添加它。这样,每个新的div帖子的边框上都会有此动画。但是问题在于它在SVG中。无论如何,我可以在不使用SVG的情况下使此动画工作,并且我也不想使用javascript。 可以说代码是: 问题答案: CSS可以做到这一点,并且在使用多个背景并使用动画更改其位置时非常简单。 这是一个页面加载后边框连续不断移动的示例。 归功于web-tiki,它有助于修复最初在动画每个

  • 我已经搜索了,但没有在网上和手册上找到任何关于这一点的东西。 重启后如何保持分流有什么想法吗?