ngAnimate angularjs 和 bootstrap

Question

我用 Angularjs 和 ui.Bootstrap

开发了一个应用

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

with animate.css, 我想为我的视图的进入和离开设置动画，但是 bootstrap 没有同时 class ( .myclass-enter 和.myclass-离开）不知道为什么？

Answer 1

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

例如，要制作视图幻灯片，您可以这样写类s:

<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我整理的这个方法。

Answer 2

thinx 我想我忘记了 css class 上的供应商前缀，所以它现在可以与 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;
}

ngAnimate angularjs 和 bootstrap

ngAnimate angularjs and bootstrap

angularjs

animate.css

twitter-bootstrap-3