1

我需要能够制作一些 css3 动画，但我一直在阅读，似乎并不容易。有没有办法用 jQuery 做到这一点？有人有这方面的经验吗？

基本上我的html是这样的：

<div class="automobiles"></div>
<div class="airplanes"></div>

两者都使用相同的 CSS 关键帧动画。当页面加载时一切正常，两个动画都是同步的，但在某些时候我会删除飞机 div，然后将其附加回来。当然，这可能会发生动画不再同步的情况。

所以基本上无论如何都可以用 jQuery 同步动画？

非常感谢。我也可以在这里附加css，但我相信它并不是真的需要。

4

3 回答 3

1

我认为没有一种简单的方法可以在任何给定状态下同步两个动画 - 我的意思是，如果你将“飞机”添加回页面，而“汽车”动画只是完成了一半，那么你会有麻烦了。除非...

以下是一些解决方法：

1）把动画放到一个类中：

.im-animated { animation:customAnim 5s infinite; }

然后通过 jQuery onload 切换类，并在将飞机添加回页面时再次切换它。这样，飞机和汽车的动画就会重新开始。

例如：

var $autos = $('.automobiles'),
    $planes = $('.airplanes'),
    $both = $autos.add($planes),
    animClass = 'im-animated';

$(document).one('ready',function(){
    $both.addClass(animClass);
    /* ...more stuff happens here... */
    $planes.hide();
    /* ...more stuff happens here... */
    $both.removeClass(animClass).addClass(animClass).show();
});

2）不要真正隐藏 .airplanes，而是将其移出屏幕：

$planes.css({'position':'absolute','left':'-9999px'});

所以动画将继续运行。然后只是$planes.removeAttr('style');，或以另一种方式将其放回原处。

于 2013-05-20T13:45:26.043 回答
0

您可以暂停 CSS3 动画：

animation-play-state: paused

CSS3 动画

于 2013-05-20T13:45:37.113 回答
0

不，恐怕目前 JavaScript 中没有 API 可以让您控制动画。

我们唯一拥有的animationStarted是一个在动画开始时触发的事件（在支持的浏览器上）。除此之外，我们不能真正重新同步动画，除非我们以某种方式重新触发它们，例如，删除一个类并重新添加它。

所以你最好的选择是同时重新触发所有动画，或者以某种方式确定何时最好触发你的飞机动画（尽管没有万无一失的方法 - 你可以获得的关闭是通过定时动画）。

另外，只是一个想法，为什么要删除飞机 div 而不是隐藏它？

于 2013-05-20T13:43:58.617 回答