title: AngularJS Animation Performance in FireFox
body: <p>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.</p>
  
  <p>Why is this inconsistency occurring?</p>
  
  <p>Can this be corrected, and if so, is there an elegant cross browser fix?</p>
  
  <p><strong>JS Fiddle:</strong></p>
  
  <p><a href="http://jsfiddle.net/7SwST/11/" rel="nofollow">http://jsfiddle.net/7SwST/11/</a></p>
  
  <p><strong>Angular:</strong></p>
  
  <pre><code>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');
      };
  }]);
  </code></pre>
  
  <p><strong>CSS:</strong></p>
  
  <pre><code>.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; }
  </code></pre>