This repository was archived by the owner on Apr 12, 2024. It is now read-only.
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
Description
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