Javascript 循环直到动画完成

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

原因是：我在父div中创建了一个。父div由于动画而更改其宽度。问题是UI布局不适应父级的宽度

通过调用

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

所以我的想法是循环
$（window.trigger（'resize'）只要父div宽度的动画正在播放

播放动画时循环函数的最佳方式是什么？
或者有没有更好的方法来实现我想要的

非常感谢
 您可以使用jQuery语法，它允许您监听进度事件

例如：

$( "#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);
}

这将每隔几毫秒调整窗口大小（根据需要调整），并在转换结束后停止此操作。
如果使用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);

请共享启动动画的代码。动画是CSS动画还是jQuery动画？不可能。循环时，您的回调将永远不会执行。您只有一个UI线程。您将在何处触发调整大小事件？在while循环中。动画和CSS动画将立即返回，它们将在另一个线程中运行。如果您想尝试，您可以在循环中设置10个元素的动画，它们将同时启动。因此，您将在整个动画期间在繁忙的
循环中阻止浏览器？非常感谢！这很有帮助：-）