动画 Bootstrap 打开和关闭动画 - 角度答案

【问题标题】：Animating Bootstrap Open and close animation - angular动画 Bootstrap 打开和关闭动画 - 角度
【发布时间】：2013-12-19 13:39:43
【问题描述】：

我在 Angular 中使用 twitter 引导模态窗口，并希望在模态窗口出现和关闭时有动画。我试过 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;
}

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

【问题讨论】：

标签： angularjs

【解决方案1】：

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

【讨论】：