for3st for3st - 1 year ago 59
AngularJS Question

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


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

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

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;


function reloadAnalysisMetaList() {
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
(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?

Answer Source

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);
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download