ngAnimate angularjs 和引导程序答案

【问题标题】：ngAnimate angularjs and bootstrapngAnimate angularjs 和引导程序
【发布时间】：2015-07-30 19:53:29
【问题描述】：

我用 Angularjs 和 ui.Bootstrap 做了一个应用程序

我使用 $routeProvider 所以我的主页中有一个<ng-view></ng-view>，

使用 animate.css，我想动画进入和离开我的视图，但引导程序没有两个类（ .myclass-enter 和 .myclass-leave ）不知道为什么？

【问题讨论】：

您需要在您的模块中包含angular-version/angular-animate.js 并将ngAnimate 模块列为依赖项。这些类是由 ngAnimate 模块添加的。

标签： angularjs twitter-bootstrap-3 animate.css

【解决方案1】：

Bootstrap 不负责为 ng-view 元素设置动画。但是您可以使用 ngAnimate 模块轻松实现这一点（记得将其注入您的主应用程序模块）。您需要做的就是实现几个类。

例如要制作视图幻灯片，您可以编写以下类：

<div ng-view class="slide"></div>

和 CSS：

.slide {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
}
.slide.ng-enter,
.slide.ng-leave {
    transition: all 1s ease;
}
.slide.ng-enter {
    left: 100%;
}
.slide.ng-enter-active,
.slide.ng-leave {
    left: 0;
}
.slide.ng-leave-active {
    left: -100%;
}

这里是some examples我整理的这个方法。

【讨论】：

我认为问题可能与添加这些类的 ng-animate 有关。 OP 说他已经在使用 animate.css。
是的，当然需要 ngAnimate，但是您仍然需要使用 animate.css 动画或简单的过渡来实现 ng-enter/leave 类。
当然，我刚刚发表评论是因为您最初似乎在回答中错过了它。我专注于 with animate.css, I want to animate enter and leave of my view, but bootstrap doesn't had both class 假设 OP 有一些 sample of animation classes with rules

【解决方案2】：

thinx 我想我忘记了我的 css 类上的供应商前缀，所以它现在可以与 animate.css 一起使用

.slide.ng-enter,
.slide.ng-leave {
}
.slide.ng-enter {
    animation-delay: 1s;
}
.slide.ng-enter-active {
    -webkit-animation-name: bounceIn;
            animation-name: bounceIn;
}
.slide.ng-leave {
}
.slide.ng-leave-active {
    -webkit-animation-name: hinge;
            animation-name: hinge;
}

【讨论】：