CODEWITHSUNDEEP
angularjsng-animateanimate.css
frankhommers
frankhommers

Reputation: 1315

animate.css animation within angularjs 1.3 using ngAnimate gives different animations in Firefox

I am trying to figure out what causes the difference between Firefox and Chrome/IE when animating.

The difference is that IE/Chrome do show an bounce effect when showing a message.

The source looks like this:

<!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>

This is the plunk: http://plnkr.co/edit/Srb5jY0LnBp25QJqSxFs?p=preview

Is this a bug, or am I overlooking stuff?

Upvotes: 0

Views: 803

Answers (2)

frankhommers
frankhommers

Reputation: 1315

It was a bug in ngAnimate which was fixed after reporting this: https://github.com/angular/angular.js/issues/10613

Upvotes: 0

bertrandg
bertrandg

Reputation: 3207

You are using angular 1.3.7 and angular-animate 1.3.5, not recommended, always use same version!

I just replaced these 2 with last version available 1.3.15 and it corrects that on Firefox. :)

Upvotes: 1

Related Questions