ngAnimate angularjs和bootstrap

Question

我使用Angularjs和ui.Bootstrap

进行应用

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

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

Answer 1

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

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

<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类中的供应商前缀，所以它现在可以与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;
}