2

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

为什么会出现这种不一致？

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

JS小提琴：

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

角度：

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

0 回答 0