angularjs 1.3 中使用 ngAnimate 的 animate.css 动画在 Firefox 中提供不同的动画答案

【问题标题】：animate.css animation within angularjs 1.3 using ngAnimate gives different animations in Firefoxangularjs 1.3 中使用 ngAnimate 的 animate.css 动画在 Firefox 中提供不同的动画
【发布时间】：2014-12-31 00:47:07
【问题描述】：

我正在尝试找出导致 Firefox 和 Chrome/IE 在制作动画时存在差异的原因。

不同的是，IE/Chrome在显示消息时确实会显示弹跳效果。

源码如下：

<!DOCTYPE html>
<html ng-app="MyApp" >

<head>
  <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/animate.css/3.2.0/animate.min.css" />
  <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.7/angular.js"></script>
  <script src="https://code.angularjs.org/1.3.5/angular-animate.js"></script>
  <style>
    .welcome.ng-hide-remove {
      -webkit-animation: bounceInLeft 1s;
      -moz-animation: bounceInLeft 1s;
      -o-animation: bounceInLeft 1s;
      animation: bounceInLeft 1s;
    }
    .welcome.ng-hide-add {
      -webkit-animation: bounceOutRight 1s;
      -moz-animation: bounceOutRight 1s;
      -o-animation: bounceOutRight 1s;
      animation: bounceOutRight 1s;
    }
  </style>
  <script>
    (function() {
      var angularApp = angular.module("MyApp", ['ngAnimate']);

      var mainCtrl = function($scope, $timeout, $interval) {
        $scope.welcomeBool = false;
        $interval(function() {
          $scope.welcomeBool = !$scope.welcomeBool;
        }, 1500);
      };
      angularApp.controller("MainCtrl", 
         ["$scope", "$timeout", "$interval", mainCtrl]
      );
    }());
  </script>
</head>

<body ng-controller="MainCtrl">
  <h1 ng-show="welcomeBool" class="welcome">
     Hello 'non-bouncy' and fading Firefox animation!
  </h1>
</body>

</html>

这是笨蛋：http://plnkr.co/edit/Srb5jY0LnBp25QJqSxFs?p=preview

这是一个错误，还是我忽略了一些东西？

【问题讨论】：

好像FF显示动画没问题，有ngAnimate的东西

标签： angularjs ng-animate animate.css

【解决方案1】：

您正在使用 angular 1.3.7 和 angular-animate 1.3.5，不推荐，始终使用相同的版本！

我刚刚用可用的最新版本 1.3.15 替换了这 2 个，它在 Firefox 上更正了该问题。 :)

【讨论】：

【解决方案2】：

这是 ngAnimate 中的一个错误，在报告此问题后已修复：https://github.com/angular/angular.js/issues/10613

【讨论】：