CODEWITHSUNDEEP
javascriptangularjsanimation
Tamás Pap
Tamás Pap

Reputation: 18273

$animate addClass not working in angular 1.3

While this demo works perfectly with angular 1.2, I can't make it work with 1.3.

http://plnkr.co/edit/r0aAPnTqoBfRFNBwQSpY?p=preview

I read the changelog, and find out that the $animate service had several breaking changes from 1.2 to 1.3, but I wasn't able to make this animation work.

The expected result is, that the dialog div appears with a zoomIn animation, but with 1.3 it appearn without any animation.

index.html 

<head>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.9/angular.min.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.9/angular-animate.min.js"></script>
  <link rel="stylesheet" href="style.css" />
  <script src="script.js"></script>
</head>

<body>
  <div dialog></div>
</body>

</html>

dialog.html

<div class="dialog">
  I'm a dialog!
  <button ng-click="addClass()">Add</button>
  <button ng-click="removeClass()">Remove</button>
</div>

script.js

    angular.module("app", ["ngAnimate"]);

    angular.module("app").directive("dialog", function($animate) {
      return {
        replace: true,
        templateUrl: "dialog.html",
        link: function(scope, el) {
          $animate.addClass(el, "open");
        }
      }
    });

and finally style.css

/* Styles go here */

@-webkit-keyframes zoomIn {
  0% {
    opacity: 0;
    -webkit-transform: scale3d(.3, .3, .3);
    transform: scale3d(.3, .3, .3);
  }

  50% {
    opacity: 1;
  }
}

@keyframes zoomIn {
  0% {
    opacity: 0;
    -webkit-transform: scale3d(.3, .3, .3);
    transform: scale3d(.3, .3, .3);
  }

  50% {
    opacity: 1;
  }
}

.dialog {
  display: none;
}

.dialog.open {
  display: block;
}

.dialog.open-add {
  display: block;
  -webkit-animation-name: zoomIn;
  -moz-animation-name: zoomIn;
  -o-animation-name: zoomIn;
  animation-name: zoomIn;

  -webkit-animation-duration: 4s;
  -moz-animation-duration: 4s;
  -o-animation-duration: 4s;
  animation-duration: 4s;
}

Your help is appreciated.

Upvotes: 0

Views: 691

Answers (1)

Ivan Burnaev
Ivan Burnaev

Reputation: 2730

It's from documentation

this will be skipped if no CSS transitions or keyframes are defined on the -add-active or base CSS class.

You should add your transition not to .open-add class but to .open-add-active

Upvotes: 2

Related Questions