Question

只要动画执行，我正在寻找一种循环函数的方法。

原因是：我在父div中创建了UI-Layout。由于动画，父div改变了它的宽度。问题是UI-Layout没有调整到父的宽度。

动画完成后调用$(window).trigger('resize');，UI布局会调整为新宽度。但我现在希望布局能够平滑地调整到动画，以便UI-Layout以动画方式增长（就像父div一样）。

所以我的想法是循环$(window).trigger('resize');，只要播放父div的宽度动画。

动画播放时循环播放功能的最佳方法是什么？或者有更好的方法来实现我想要的东西吗？

非常感谢！

Answer 1

您可以使用jQuery .animate(properties, options)语法，该语法允许您收听进度事件。

示例：

$( "#book" ).animate({
    width: "+=50px" // whatever CSS properties that are animated...
}, {
    duration: 500,
    progress: function() { // This gets called several times during the animation
        $(window).trigger('resize');
    }
    complete: function() {
        $(window).trigger('resize');
    }
});

CSS转换

如果您使用的是纯CSS转换，那么在启动转换后，您可以调用此函数，并将正在设置动画的元素传递给它：

function manageResize(elem) {
    var timer = setInterval(function () {
        $(window).trigger('resize');
    }, 50);
    elem.addEventListener('transitionend', function () {
        clearInterval(timer);
    }, false);
}

这将每隔几毫秒调整一次窗口大小（根据需要调整），并在转换结束后停止这样做。

Answer 2

如果您正在使用jQuery动画，那么将采用以下方式：

var animating = true;
$( elem ).animate({
    opacity: 0.25,
    left: "+=50",
    height: "toggle"
}, 5000, function() {
    animating = false;
});

var timer = setInterval(function(){
    if(animating)
       $(window).trigger('resize');
    else
       clearInterval(timer);
},50);

或者，如果您正在使用CSS动画：

// start animation
var animating = true;
$( elem ).addClass("animating");
$( elem ).one("webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend",
    function(event) {
    animating = false;
});

var timer = setInterval(function(){
    if(animating)
       $(window).trigger('resize');
    else
       clearInterval(timer);
},50);

循环直到动画完成

2 个答案:

CSS转换