ngAnimate angularjs и самонастройки

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; 
}