This repository was archived by the owner on Apr 12, 2024. It is now read-only.
Nested ng-class breaks ngAnimate in Angular 1.4.0-rc.1 #11812
Closed
Description
See the example at: http://plnkr.co/edit/Wj1G7Zwz16f03iUqwGoh?p=preview. Clicking on the red button should start an animation but it doesn't. If you swap Angular 1.4.0-rc.1 to 1.3.15, it starts to work: http://plnkr.co/edit/tNTiJSBhdyr2dNCL0oBw?p=preview
Removing the ng-class set on a button makes the issue go away.
For posterity, the code:
<!DOCTYPE html>
<html ng-app="testApp">
<head>
<meta charset="utf-8">
<title>Test page</title>
<style>
my-elem {
position: fixed;
width: 100%;
height: 100%;
display: block;
background-color: black;
}
my-elem.down-add {
transition: transform 3s;
transform: translateY(0);
}
my-elem.down,
my-elem.down-add.down-add-active {
transform: translateY(54px);
}
my-elem.down-remove {
transition: transform 4s;
transform: translateY(54px);
}
my-elem,
my-elem.down-remove.down-remove-active {
transform: translateY(0);
}
button {
position: relative;
display: block;
width: 100px;
height: 30px;
background: red;
}
</style>
</head>
<body>
<my-elem ng-class="{ 'down': down }" down="down"></my-elem>
<script src="https://code.angularjs.org/1.4.0-rc.1/angular.js"></script>
<script src="https://code.angularjs.org/1.4.0-rc.1/angular-animate.js"></script>
<script>
angular
.module('testApp', ['ngAnimate'])
.directive('myElem', function () {
return {
restrict: 'E',
template: '<button ng-class="{\'active\': down}" ng-click="down = !down">Click me</button>',
scope: {
down: '=',
},
};
})
.run(function ($rootScope) {
$rootScope.down = undefined;
});
</script>
</body>
</html>