Angular: ngAnimate bug

http://angularjs.org/

by rafalry

HTML

<script src="http://code.angularjs.org/1.1.4/angular.js"></script>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<div ng-controller="MyCtrl">
    <button ng-click="hide = !hide">toggle</button> Hide: {{hide}}
    <p ng-hide="hide" ng-animate="'fade'">Hello, {{name}}!</p>
</div>

CSS

.fade-show-setup,
.fade-hide-setup {
    transition: all ease-in .5s;
}

.fade-show-setup,
.fade-hide-setup.fade-hide-start {
    opacity: 0;
}

.fade-hide-setup,
.fade-show-setup.fade-show-start {
    opacity: 1;
}

JavaScript

var myApp = angular.module('myApp',[]);

function MyCtrl($scope) {
    $scope.name = 'Superhero';
    $scope.hide = false;
    
    // Show the animation problem when toggling fast (before previous animation finished)
    setTimeout(function() {
        $('button').click().click();
    }, 0);
    
    // You can manually trigger the bug by double clicking when hide = false
}