0
虽然此演示与角度1.2完美配合,但我无法使其适用于1.3。
http://plnkr.co/edit/r0aAPnTqoBfRFNBwQSpY?p=preview
我读的更新日志,并找出了$有生服务有几个重大更改从1.2到1.3,但我不能让这个动画作品。
预期的结果是,dialog
div显示为zoomIn
动画,但1.3中没有任何动画显示。
的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");
}
}
});
最后的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;
}
您的帮助表示赞赏。
我试过这种方式,但相同的结果:http://plnkr.co/edit/BSyDaE2Nhvwckk09OLcr?p=preview。如果你有一个工作演示,请链接它的答案。谢谢。 –
下面是一个简单的例子:http://plnkr.co/edit/E6wZM9l25uhlP1wDIDrs?p=preview –
谢谢你的演示。基于它,我能够修复我自己的版本: http://plnkr.co/edit/uZ0TJrNAiyyQ1R1TXEIo?p=preview –