CODEWITHSUNDEEP
javascriptangularjscsscss-transitions
Patrick
Patrick

Reputation: 35232

CSS Transition delaying DOM/scope update in AngularJs

It seems when I apply css transitions, the dom/scope updates get delayed as well.

I have a list that can be paged. When the top div wrapper of each list-element .tl-container

<div class="tl-container" ng-repeat="elem in analysisMetaList.list">
 ...
</div>

gets the css transition

.tl-container {
    ...
    transition: background-color 150ms ease-out; /* for smoother hover effect*/
}
.tl-container:hover {
    background-color: #ecf0f1;
}

The updates are delayed and I can see the old list for the transition time (so if it would be 3 sec, the old list would stay there for 3sec):

showcase delayed

wheras when I only delete this css transition and keep everything else the same, it works as expected:

showcase normal

analysisMetaList.list is a normal array that will be filled through a http call (simplyfied code)

angular.module('app').controller('Ctrl', ['$scope','$http', function($scope, $http) {
    var analysisPerPage = 5;

    $scope.analysisMetaList={};

    function reloadAnalysisMetaList() {
        $http({
            method: 'GET',
            url: constants.getApiUrl() +"/analysis/",
            headers: {'If-None-Match': $scope.analysisMetaList.etag}})
            .success(function (data, status, headers, config) {
                $scope.analysisMetaList.list = data.splice(0,analysisPerPage);
                $scope.analysisMetaList.etag = headers("Etag");
            });
}]);

The whole page is data heavy, but fast enough - although it does not seem to have anything to do with performance.

As a side note: the same bug happend with simple ng-show (where entering a value in a textfield lets the textfield disappear and the not-editable value will be shown)

I tryed recreating the bug with a simple plunkr but I couldn't. I additionally use the angular-route and angular-animate plugins.

Tested with angular 1.3 & 1.2 on chrome & firefox

Is this a known angular or javascript issue?

Upvotes: 0

Views: 598

Answers (1)

Dylan
Dylan

Reputation: 4773

ngAnimate is going to use that css trasition timing to base any of the standard directives so ng-show and ng-repeat may wait on it and will put all of the css on that element style. You can try to cancel animation on that element with. 

$animate.enabled(false, element);

Upvotes: 2

Related Questions