$animate addClass not working in angular 1.3
Question
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.
1 answers
solution1
2 ACCPTED 2015-04-06 20:55:48
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
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.