为了账号安全,请及时绑定邮箱和手机立即绑定

如何通过JavaScript重新触发WebKit CSS动画?

/ 猿问

如何通过JavaScript重新触发WebKit CSS动画?

HUH函数 2019-11-07 13:10:59

因此,我有以下-webkit-animation规则:


@-webkit-keyframes shake {

    0% {

        left: 0;

    }

    25% {

        left: 12px;

    }

    50% {

        left: 0;

    }

    75% {

        left: -12px;

    }

    100% {

        left:0;

    }

}

还有一些CSS定义了我的一些动画规则box:


#box{

    -webkit-animation-duration: .02s;

    -webkit-animation-iteration-count: 10;

    -webkit-animation-timing-function: linear;

}

我可以shake在#box这样的:


document.getElementById("box").style.webkitAnimationName = "shake";

但是我以后不能再动摇了。


这只会摇晃盒子一次:


someElem.onclick = function(){

    document.getElementById("box").style.webkitAnimationName = "shake";

}

如何在不使用超时或多个动画的情况下通过JavaScript重新触发CSS动画?


查看完整描述

3 回答

?
湖上湖

我在CSS3转换测试github页面上根据源代码和示例找到了答案。


基本上,CSS动画具有一个animationEnd在动画完成时触发的事件。


对于Webkit浏览器,此事件称为“ webkitAnimationEnd”。因此,为了在调用动画后重置动画,您需要在事件元素中添加事件监听器animationEnd。


在普通的javascript中:


var element = document.getElementById('box');


element.addEventListener('webkitAnimationEnd', function(){

    this.style.webkitAnimationName = '';

}, false);


document.getElementById('button').onclick = function(){

    element.style.webkitAnimationName = 'shake';

    // you'll probably want to preventDefault here.

};

并使用jQuery:


var $element = $('#box').bind('webkitAnimationEnd', function(){

    this.style.webkitAnimationName = '';

});


$('#button').click(function(){

    $element.css('webkitAnimationName', 'shake');

    // you'll probably want to preventDefault here.

});

CSS3过渡测试的源代码(如上所述)具有以下support对象,这可能对跨浏览器的CSS过渡,转换和动画很有帮助。


以下是支持代码(重新格式化):


var css3AnimationSupport = (function(){

    var div = document.createElement('div'),

        divStyle = div.style,

        // you'll probably be better off using a `switch` instead of theses ternary ops

        support = {

            transition:

                divStyle.MozTransition     === ''? {name: 'MozTransition'   , end: 'transitionend'} :

                // Will ms add a prefix to the transitionend event?

                (divStyle.MsTransition     === ''? {name: 'MsTransition'    , end: 'msTransitionend'} :

                (divStyle.WebkitTransition === ''? {name: 'WebkitTransition', end: 'webkitTransitionEnd'} :

                (divStyle.OTransition      === ''? {name: 'OTransition'     , end: 'oTransitionEnd'} :

                (divStyle.transition       === ''? {name: 'transition'      , end: 'transitionend'} :

                false)))),

            transform:

                divStyle.MozTransform     === '' ? 'MozTransform'    :

                (divStyle.MsTransform     === '' ? 'MsTransform'     :

                (divStyle.WebkitTransform === '' ? 'WebkitTransform' : 

                (divStyle.OTransform      === '' ? 'OTransform'      :

                (divStyle.transform       === '' ? 'transform'       :

                false))))

            //, animation: ...

        };

    support.transformProp = support.transform.name.replace(/([A-Z])/g, '-$1').toLowerCase();

    return support;

}());

我尚未添加代码来检测每个浏览器的“动画”属性。我已将此答案设为“社区Wiki”,并留给您。:-)


查看完整回答
反对 回复 2019-11-07
?
潇湘沐

您必须先删除动画,然后再次添加它。例如:


document.getElementById("box").style.webkitAnimationName = "";

setTimeout(function ()

{

    document.getElementById("box").style.webkitAnimationName = "shake";

}, 0);

要在没有setTimeout的情况下执行此操作,请在中删除动画onmousedown,然后在中添加动画onclick:


someElem.onmousedown = function()

{

    document.getElementById("box").style.webkitAnimationName = "";

}

someElem.onclick = function()

{

    document.getElementById("box").style.webkitAnimationName = "shake";

}


查看完整回答
反对 回复 2019-11-07
?
收到一只叮咚

按照https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_Animations/Tips的建议,使用requestAnimationFrame删除并添加动画类,以确保渲染引擎处理这两个更改。我认为这比使用setTimeout更干净,并且可以在上一次播放完成之前处理动画的重播。


$('#shake-the-box').click(function(){   

  $('#box').removeClass("trigger");

  window.requestAnimationFrame(function(time) {

  window.requestAnimationFrame(function(time) {

      $('#box').addClass("trigger");

    });

    });    

});


http://jsfiddle.net/gcmwyr14/5/


查看完整回答
反对 回复 2019-11-07

添加回答

回复

举报

0/150
提交
取消
意见反馈 帮助中心 APP下载
官方微信