Animation FireFox中AngularJS的动画性能

我正在使用ng animate在AngularJS中制作一个简单的滑动面板。这在Chrome中效果很好，但在FireFox中，动画非常不一致。这可能是由于Gecko中的转换支持。这几乎像是一个行动队列问题。因为您可以中断显示/隐藏并执行动画，但它会在随机时刻弹出到位

为什么会出现这种不一致

这是否可以纠正，如果可以，是否有一个优雅的跨浏览器修复

JS小提琴：

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');
    };
}]);

.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; }

角度：

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');
    };
}]);

.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; }

CSS:

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');
    };
}]);

.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; }

---

我有一个非常类似的问题。我使用ngAnimate在angular中实现了一个小旋转木马。这些转换在chrome中运行良好，但在Firefox和IE10中似乎存在问题。第一张幻灯片的转换不起作用，其他幻灯片的效果很好（我在这里谈论的是FF和IE）。为了说明这个问题，我做了一个小小的尝试：