如何重新运行css3的动画?

发布于 2022-09-01 06:50:49 字数 1156 浏览 24 评论 0

如何通过一个事件(hoverclick..)触发css3动画的重新执行?
在stackoverflow找到一个相关的问题,但是下面给出的答案也不起作用。

http://jsfiddle.net/arunpjohny/8WQcy/1/


这篇文章挺好的,介绍了重新运行css3动画的不同方法


animation必须是infiniteanimation-play-state才有效。

restart用这种方法挺好:

// retrieve the element
element = document.getElementById("logo");

// reset the transition by...
element.addEventListener("click", function(e) {
  e.preventDefault;

  // -> removing the class
  element.classList.remove("run-animation");

  // -> triggering reflow /* The actual magic */
  // without this it wouldn't work. Try uncommenting the line and the transition won't be retriggered.
  element.offsetWidth = element.offsetWidth;

  // -> and re-adding the class
  element.classList.add("run-animation");
}, false);

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(6

半山落雨半山空 2022-09-08 06:50:49

为何不用animationend事件,这个也很好做兼容

el.addEventListener('click',function(){
    this.classList.add('active');
    this.addEventListener('animationend',function(){
        this.classList.remove('active');
    });
});
    
平定天下 2022-09-08 06:50:49
$it.css('-webkit-animation-play-state', 'running');

你这里的属性名写错了

归途 2022-09-08 06:50:49

我也在找怎么用事件重启css3 animation动画呢,可是我发现这个问题不知道是太简单还是什么,在国内根本就找不到答案,我只能硬着头皮去stackoverflow去搜,很巧合的是我也找到了你的那篇文章,写的很棒很详细,虽然英文不好,但获益良多,我很纳闷为什么看似简单的问题却根本百度不到,难道大家都没遇到过吗

木緿 2022-09-08 06:50:49

这个问题我也遇到过, 所幸还好容易解决. 给要动画的dom元素上加个可控制的CSS。

js. 控制 $('.animation').removeClass('active').delay(10).queue(function(next){

            $(this).addClass('active');
            next();  //让下面的队列函数得以执行; 猜的
            });
新人笑 2022-09-08 06:50:49

在IPHONE9.1上还是不行。 PC浏览器正常。有没有解决办法?

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文