Question

我想弄清楚动画时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

这是一个错误，还是我忽略了什么？

Answer 1

你正在使用角度1.3.7和角度动画1.3.5，不推荐，总是使用相同的版本！

我刚用最新版本1.3.15替换了这两个版本，它在Firefox上进行了修正。：）

Answer 2

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

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

2 个答案: