Question

我有一个可以添加语言的列表。添加语言后，会显示一个动画，以最大程度地吸引眼球。动画是由HTML中ng-show="lang.visible"中的状态更改触发的。我必须首先将语言添加到语言数组，然后将visible状态更改为true才能显示动画。

问题是，当我将语言添加到数组时，DOM大约需要700毫秒才能更新，然后更改visible的状态。这700毫秒使页面感觉很慢。

$scope.addTourDescLang = function(newLang) {
    newLang.visible = false;

    $scope.newClient.tours.languages.push(newLang);

    $timeout(function() {
        newLang.visible = true;
    }, 700 );
};

这是动画代码：

<script>
app.animation('.slide-toggle', ['$animateCss', function($animateCss) {
    var lastId = 0;
    var _cache = {};

    function getId(el) {
        var id = el[0].getAttribute("data-slide-toggle");
        if (!id) {
            id = ++lastId;
            el[0].setAttribute("data-slide-toggle", id);
        }
        return id;
    }

    function getState(id) {
        var state = _cache[id];
        if (!state) {
            state = {};
            _cache[id] = state;
        }
        return state;
    }

    function generateRunner(closing, state, animator, element, doneFn) {
        return function() {
            state.animating = true;
            state.animator = animator;
            state.doneFn = doneFn;
            animator.start().finally(function() {
                if (closing && state.doneFn === doneFn) {
                    element[0].style.height = '';
                }
                element[0].style.height = 'auto';
                state.animating = false;
                state.animator = undefined;
                state.doneFn();
            });
        }
    }

    return {
        addClass: function(element, className, doneFn) {
            if (className == 'ng-hide') {
                var state = getState(getId(element));
                var height = (state.animating && state.height) ? 
                    state.height : element[0].offsetHeight;

                var animator = $animateCss(element, {
                    from: {height: height + 'px'},
                    to: {height: '0px'}
                });
                if (animator) {
                    if (state.animating) {
                        state.doneFn = 
                          generateRunner(true, 
                                         state, 
                                         animator, 
                                         element, 
                                         doneFn);
                        return state.animator.end();
                    }
                    else {
                        state.height = height;
                        return generateRunner(true, 
                                              state, 
                                              animator, 
                                              element, 
                                              doneFn)();
                    }
                }
            }
            doneFn();
        },
        removeClass: function(element, className, doneFn) {
            if (className == 'ng-hide') {
                var state = getState(getId(element));
                var height = (state.animating && state.height) ?  
                    state.height : element[0].offsetHeight;

                var animator = $animateCss(element, {
                    from: {height: '0px'},
                    to: {height: height + 'px'}
                });

                if (animator) {
                    if (state.animating) {
                        state.doneFn = generateRunner(false, 
                                                      state, 
                                                      animator, 
                                                      element, 
                                                      doneFn);
                        return state.animator.end();
                    }
                    else {
                        state.height = height;
                        return generateRunner(false, 
                                              state, 
                                              animator, 
                                              element, 
                                              doneFn)();
                    }
                }
            }
            doneFn();
        }
    };
}]);

(function() {
    var app = angular.module('app', ['ngAnimate']);

    app.animation('.slide-toggle', ['$animateCss', function($animateCss) {
        return {
            addClass: function(element, className, doneFn) {
                if (className == 'ng-hide') {
                    var animator = $animateCss(element, {                    
                        to: {height: '0px'}
                    });
                    if (animator) {
                        return animator.start().finally(function() {
                            element[0].style.height = '';
                            doneFn();
                        });
                    }
                }
                doneFn();
            },
            removeClass: function(element, className, doneFn) {
                if (className == 'ng-hide') {
                    var height = element[0].offsetHeight;
                    var animator = $animateCss(element, {
                        from: {height: '0px'},
                        to: {height: height + 'px'}
                    });
                    if (animator) {
                     return animator.start().finally(doneFn);
                    }
                }
                doneFn();
            }
        };
    }]);
})();
</script>

CSS：

.slide-toggle {
  overflow: hidden;
  transition: all 0.25s; 
}

HTML：

<table class="table-list">
    <tbody ng-repeat="langAdded in newClient.tours.languages">
        <tr>
            <td>
                <div ng-show="langAdded.added" class="table-list-content slide-toggle">
                    <div>
                        <img ng-src="/images/icons/flags/flag-{{ langAdded.code }}-30x20.png" style="vertical-align: middle; margin: 0 10px 0 20px;">
                        {{ langAdded.title }}
                    </div>
                </div>
            </td>
            <td>
                <div ng-show="langAdded.added" class="slide-toggle">
                    <md-button class="md-icon-button remove-icon-button" ng-click="removeTourDescLang(langAdded)" aria-label="Remove">
                        <md-icon md-svg-icon="/images/icons/svg/cross-close.svg"></md-icon>
                    </md-button>
                </div>
            </td>
        </tr>
    </tbody>
</table>

如何更好地做到这一点？如何在立即将visible状态更改为true之后立即更新DOM？

Answer 1

像这样在您的代码中使用track by $index，因为如果ng-repeat多次在同一个对象上进行迭代，则会停止运行

ng-repeat='langAdded in newClient.tours.languages track by $index'

或者在您的$scope.addTourDescLang函数中使用$ scope。$ apply（）（即使不是首选方法），该函数将通过调用$scope.$digest()来强制启动摘要循环您，那么价值就可以即时更新。

$scope.newClient.tours.languages.push(newLang);
$scope.$apply()

AngularJS-立即更新DOM中的ng-repeat列表以允许动画

1 个答案: