Question

我正在尝试延迟路由更新，直到动画完成运行。我循环遍历元素并添加一个具有与之关联的CSS动画的类。我无法等待所有动画完成，它似乎只等待第一个动画。

.config(['$locationProvider', '$routeProvider', function($locationProvider, $routeProvider) {
    $routeProvider
    .when('/home', {
        templateUrl: 'views/home.html',
        controller: 'home',
        resolve: {
            delay: function($q, $animate){

                var promises = [];

                $('.animate').each(function(e){
                    var promise = $animate.addClass(this, 'animate-out');
                    promises.push(promise);
                });

                return $q.all(promises);
            }
        },
        showNav: false
    });
    $locationProvider.html5Mode(true);
}])

任何想法我做错了，还是有更好的方法来做到这一点？

感谢。

Answer 1

如果我对所有元素使用$ animate.addClass，但只为最终元素返回一个promise，那么它仍然会遇到同样的问题，比如它覆盖$ animate或者什么...

通过将元素的持续时间和延迟时间相加，然后仅将$ animate.addClass用于持续时间最长的那个，我找到了解决问题的方法。

delay: function($animate){
    var $element = null,
        duration = 0;

    $('.animate').each(function(){
        var currentDuration = parseFloat($(this).css('animation-duration')) + parseFloat($(this).css('animation-delay'));
        if(currentDuration >= duration){
            duration = currentDuration;
            $element = this;
        }
    }).not($element).addClass('animate-out');

    return $element ? $animate.addClass($element, 'animate-out') : true;
}

我确信必须有更好的方法来做到这一点吗？

角度延迟路线改变，直到所有动画完成

1 个答案: