Question

我正在角度使用twitter bootstrap模态窗口，并希望在模态窗口显示和关闭时有动画。我尝试过nganimate，但它似乎不起作用。

CSS

.slide-enter-setup, .slide-leave-setup {
  -webkit-transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.5s;
  -moz-transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.5s;
  -o-transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.5s;
  transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.5s;
}
.slide-enter-setup {
  position:absolute;
  left:0;
  top:-200px;
}

.slide-enter-start {
  top:0;
}

.slide-leave-setup {
  position:absolute;
  top:0;
}

.slide-leave-start {
  top:200px;
}

JS

angular.module("template/modal/window.html", []).run(["$templateCache", function($templateCache) {
  $templateCache.put("template/modal/window.html",
    "<div ng-animate=\"slide\" class=\"modal{{ windowClass }}\" ng-class=\"{in: animate}\" ng-style=\"{'z-index': 1050 + index*10}\" ng-transclude></div>");
}]);

Plnkr - http://plnkr.co/edit/D1tMRpxVzn51g18Adnp8?p=preview

Answer 1

您正在使用AngularJS 1.2.x，但您的CSS代码遵循较旧的约定。阅读本文并更新您的CSS代码：http://www.yearofmoo.com/2013/08/remastered-animation-in-angularjs-1-2.html

动画引导程序打开和关闭动画 - 角度

1 个答案: