Skip to content
This repository was archived by the owner on Apr 12, 2024. It is now read-only.

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

Closed
frankhommers opened this issue Jan 1, 2015 · 4 comments
Closed

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

frankhommers opened this issue Jan 1, 2015 · 4 comments
Assignees
@matsko
Labels
component: ngAnimate severity: regression
Milestone
1.3.x - superlumi...

Comments

@frankhommers
Copy link

There are differences between Firefox and Chrome/IE when animating.
The difference, in this case 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 seem like an ngAnimate bug...

I also posted it on StackOverflow, here: http://stackoverflow.com/questions/27714749/animate-css-animation-within-angularjs-1-3-using-nganimate-gives-different-anima
@matsko matsko self-assigned this Jan 15, 2015
@matsko matsko added this to the 1.3.x milestone Jan 15, 2015
@matsko
Copy link
Contributor

matsko commented Jan 16, 2015

@frankhommers thanks for posting this. There is definitely a bug going on, but it looks like it only applies to ngShow/ngHide (http://plnkr.co/edit/PlqfLj5AclAnYpVI78e3?p=preview). It may have something to do with this CSS code that is present in angular-core.

.ng-hide:not(.ng-hide-animate) {
  display: none !important;
}

@frankhommers
Copy link
Author

@matsko Thanks for editing the plunk so I have a workaround now ;-) I think you're right about that CSS code. In my opinion that is very likely to be (a part of) the cause.

matsko added a commit to matsko/angular.js that referenced this issue Jan 16, 2015
@matsko
fix($animate): ensure no transitions are applied when an empty inline…
3db4fb8 
… style object is provided

Closes angular#10613
@matsko matsko mentioned this issue Jan 16, 2015
Closed
@matsko
Copy link
Contributor

matsko commented Jan 16, 2015

@frankhommers good news. Turns out the bug was an empty style object that was being passed into ngAnimate at the wrong place. #10770 is the PR that fixes this.

@frankhommers
Copy link
Author

Ah, a different cause than that we tought. Great job! Thanks a lot!

matsko added a commit that referenced this issue Jan 19, 2015
@matsko @petebacondarwin
fix($animate): ensure no transitions are applied when an empty inline…
9b8df52 
… style object is provided

Closes #10613
Closes #10770
matsko added a commit that referenced this issue Jan 19, 2015
@matsko @petebacondarwin
fix($animate): ensure no transitions are applied when an empty inline…
0db5b21 
… style object is provided

Closes #10613
Closes #10770
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Assignees

@matsko matsko

Labels
component: ngAnimate severity: regression
Projects
None yet
Milestone
1.3.x - superluminal-nudge
2 participants
@matsko @frankhommers