Animation Performance in FireFox

[Slep Murks]

Hi everyone,

I am working on making a simple sliding panel in AngularJS using ng-animate. This works fine in Chrome, but in FireFox the animation is very inconsistent. It could be due to Transitions support in Gecko. It almost seems like a action queue problem. Because you can interrupt the show/hide and have the animation execute, but then it will pop into place at random moments.

Why is this inconsistency occurring?

Can this be corrected, and if so, is there an elegant cross browser fix?

I posted also to Stack Overflow in case you have an answer and need karma ;-)

http://stackoverflow.com/questions/17729512/angularjs-animation-performance-in-firefox

JS Fiddle:

http://jsfiddle.net/7SwST/11/

Angular:

var app = angular.module('myApp', []);

app.controller('sidePanel', ['$scope', '$rootScope', '$timeout', '$animation', function($scope, $rootScope, $timeout, $animation) {
    $scope.showMe = false;

    $scope.hideMe = function() {
        $scope.showMe = false;
    }

    $scope.$on('showPanel', function() {
        $scope.showMe = true;
    });

    $scope.showPanel = function() {
        $rootScope.$broadcast('showPanel');
    };
}]);
 

CSS:

.side-panel { position: relative; display: block; border: 2px solid #000; } /*  left: -50px; overflow: visible; */
.side-panel div { width: 210px; height: 180px; background-color: #ffcc00; }

.animate-show,
.animate-hide {
    -webkit-transition: 550ms linear all;
       -moz-transition: 550ms linear all;
        -ms-transition: 550ms linear all;
         -o-transition: 550ms linear all;
            transition: 550ms linear all;
    position: relative;
    display: block;
}

.animate-show.animate-show-active,
.animate-hide { left: 0; }

.animate-hide.animate-hide-active,
.animate-show { left: -500px; }

[Christian Maniewski]

Hi,

I have a very similar problem. I implemented a little carousel in angular using ngAnimate. The transitions work fine in chrome, but seem to have problems in Firefox and IE10. The transition of the first slide does not work, the other ones work fine (I'm talking about FF and IE here). I made a little plunk to illustrate the issue:

plnkr.co/9rZqNjDvZL6amSijcWG7

[OpenNota]

https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Using_CSS_transitions

 

Care should also be taken when using a transition immediately after adding the element to the DOM using .appendChild() or removing its display: none; property. This is seen as if the initial state had never occured and the element was always in its final state. The easy way to overcome this limitation is to apply a window.setTimeout() of a handful of milliseconds before changing the CSS property you intend to transition to.

When I redefine angular's ng-hide css class, the fiddle works fine:

.ng-hide {
  display: block !important;
  left: -9999px;
  top: -9999px;
}