Nested ng-class breaks ngAnimate in Angular 1.4.0-rc.1 #11812

mgol · 2015-05-05T18:30:06Z

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>

The text was updated successfully, but these errors were encountered:

…a RAF Prior to this fix any nested class-based animations (animations that are triggered with addClass/removeClass or ngClass) would cancel each other out when nested in DOM structure. This fix ensures that the nested animations are spaced out with sequenced RAFs so that parent CSS classes are applied prior to any ancestor animations that are scheduled to run. Closes angular#11812

matsko · 2015-05-20T00:34:30Z

Good things come to those who wait: #11907

…ith a RAF Prior to this fix any nested class-based animations (animations that are triggered with addClass/removeClass or ngClass) would cancel each other out when nested in DOM structure. This fix ensures that the nested animations are spaced out with sequenced RAFs so that parent CSS classes are applied prior to any ancestor animations that are scheduled to run. Closes angular#11812

mgol added severity: regression component: ngAnimate branch: 1.4.x labels May 5, 2015

mgol added this to the 1.4.0-rc.2 milestone May 5, 2015

mgol assigned matsko May 5, 2015

mgol mentioned this issue May 5, 2015

ngAnimate: the addClass/removeClass class is added during the animation #11810

Closed

petebacondarwin modified the milestones: 1.4.0-rc.2, 1.4.0-rc.3 May 12, 2015

matsko mentioned this issue May 20, 2015

fix(ngAnimate): ensure nested class-based animations are spaced out with a RAF #11907

Closed

matsko closed this as completed in 213c2a7 May 21, 2015

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Nested ng-class breaks ngAnimate in Angular 1.4.0-rc.1 #11812

Nested ng-class breaks ngAnimate in Angular 1.4.0-rc.1 #11812

mgol commented May 5, 2015

matsko commented May 20, 2015

Nested ng-class breaks ngAnimate in Angular 1.4.0-rc.1 #11812

Nested ng-class breaks ngAnimate in Angular 1.4.0-rc.1 #11812

Comments

mgol commented May 5, 2015

matsko commented May 20, 2015