Question

动画最初工作正常，但另一个函数使用css3过渡属性为“旋转”设置动画，运行后，动画变得非常不稳定。

以下两个功能变得不稳定：

function fadePlayer(){
        $(".logof, .location").fadeOut(2000);
        $(".turntable, .arm, .bio, .controls").fadeIn(2000);
        $(".logor").animate({
            backgroundSize: "104px 103px",
            height: "103px",
            width: "104px",
            top: "5px",
            left: "33px"
        }, 1000);   
    }

和

function unFadePlayer(){
        $(".logof, .location").fadeIn(500);
        $(".turntable, .arm, .bio, .controls").fadeOut(500, function(){

        });
        $(".logor").animate({
            backgroundSize: "49px 49px",
            height: "49px",
            width: "49px",
            top: "23px",
            left: "63px"
        }, 250);    
    }

过渡效果的调用方式如下：

playing: function(){
            var degree = 0;
            spinAction = setInterval(function(){
                degree = degree < 5 ? degree + 5 : 0; 
                $(".logor").css({
                    '-webkit-transition':'all 1s ease-in-out',
                    '-webkit-transform':'rotate('+degree+'deg)',
                    '-ms-transition':'all 1s ease-in-out',
                    '-ms-transform':'rotate('+degree+'deg)',
                    '-moz-transition':'all 1s ease-in-out',
                    '-moz-transform':'rotate('+degree+'deg)',
                    '-o-transition':'all 1s ease-in-out',
                    '-o-transform':'rotate('+degree+'deg)',
                    'transition':'all 1s ease-in-out',
                    'transform':'rotate('+degree+'deg)',
                });
            }, 1000);
            var angle = 0;
            wobbleAction = setInterval(function(){
                angle = angle < 2 ? angle + 2 : 0; 
                $(".arm").css({
                    '-webkit-transform-origin':'14 14', 
                    '-webkit-transition':'all 1s ease-in-out',
                    '-webkit-transform':'rotate('+angle+'deg)',
                    '-ms-transform-origin':'14 14', 
                    '-ms-transition':'all 1s ease-in-out',
                    '-ms-transform':'rotate('+angle+'deg)',
                    '-moz-transform-origin':'14 14', 
                    '-moz-transition':'all 1s ease-in-out',
                    '-moz-transform':'rotate('+angle+'deg)',
                    '-o-transform-origin':'14 14', 
                    '-o-transition':'all 1s ease-in-out',
                    '-o-transform':'rotate('+angle+'deg)',
                    'transform-origin':'14 14', 
                    'transition':'all 1s ease-in-out',
                    'transform':'rotate('+angle+'deg)',
                });
            }, 1000);   

        },
        pause: function(){
            clearInterval(spinAction);
            clearInterval(wobbleAction);
        },

“播放”和“暂停”只是响应事件的方法。

backgroundSize的动画是通过一个插件提供的，但即使取出它，每个动作都会发生明显的延迟。 fadeIn / Out停止一致地淡化所选元素，并且动画的每一行都在后续的时间间隔内发生，而不是一次性发生。

知道可能导致这种情况的原因吗？

Answer 1

使用此jquery plugin替换过渡解决了不稳定的问题

使用css3过渡后jquery动画断断续续

1 个答案: