AngularJS ngAnimate и animate.css

Я пытался заставить свою анимацию работать правильно, используя AngularJS и animate.css. Таким образом, я создал SASS так:AngularJS ngAnimate и animate.css

.slide-animate { 
    &.ng-enter, 
    &.ng-leave{ 
    } 

    &.ng-enter { 
     -webkit-animation: bounceIn 1s; 
      -moz-animation: bounceIn 1s; 
      -o-animation: bounceIn 1s; 
       animation: bounceIn 1s; 

     &.ng-enter-active { 
     } 
    } 

    &.ng-leave {  
     -webkit-animation: zoomOutLeft 1s; 
      -moz-animation: zoomOutLeft 1s; 
      -o-animation: zoomOutLeft 1s; 
       animation: zoomOutLeft 1s; 

     &.ng-leave-active { 
     } 
    } 
}

Когда мои загрузки страницы, я получаю bounceIn анимации и, когда я нажимаю ссылку, я получаю zoomOutLeft анимации, но мнение о том, Нагрузка не имеет анимации. Если я перезагружаю этот вид при загрузке браузера, он выполняет анимацию bounceIn.

Может кто-нибудь сказать мне из этого кратким описанием, что может быть неправильным?

мой HTML выглядит следующим образом:

<html> 
<head> 
    <link href="Content/foundation/normalize.min.css" rel="stylesheet" /> 
    <link href="Content/foundation/foundation.min.css" rel="stylesheet" /> 
    <link href="Content/font-awesome.min.css" rel="stylesheet" /> 
    <link href="Content/animate.min.css" rel="stylesheet" /> 
    <link href="Content/core.min.css" rel="stylesheet" /> 
</head> 
<body ng-app="sapphire"> 
    <section class="slide-animate" ng-view></section> 

    <script src="scripts/angular.min.js"></script> 
    <script src="scripts/angular-cookies.min.js"></script> 
    <script src="scripts/angular-route.min.js"></script> 
    <script src="scripts/angular-touch.min.js"></script> 
    <script src="Scripts/angular-animate.js"></script> 

    <script src="scripts/app/app.js"></script> 
    <script src="scripts/app/controllers.js"></script> 
    <script src="scripts/app/services.js"></script> 
</body> 
</html>

источник

2015-01-26 r3plica

попробуйте ввести образец кода в плункер – maxisam

Я понял это. Прежде всего, я добавил фоновые цвета в .ng-enter и .ng-leave. Я видел, что содержимое для ввода подталкивалось под контент для отпуска, поэтому я думал, что буду играть, и это что я придумал:

.slide-animate { 
    position: absolute; 
    top: 0; 
    bottom: 0; 
    left: 0; 
    right: 0; 

    &.ng-enter, 
    &.ng-leave{ 
    } 

    &.ng-enter { 
     -webkit-animation: fadeIn 2s; 
      -moz-animation: fadeIn 2s; 
      -o-animation: fadeIn 2s; 
       animation: fadeIn 2s; 

     &.ng-enter-active { 
     } 
    } 

    &.ng-leave {  
     z-index: -1; 
     -webkit-animation: zoomOutLeft 1s; 
      -moz-animation: zoomOutLeft 1s; 
      -o-animation: zoomOutLeft 1s; 
       animation: zoomOutLeft 1s; 

     &.ng-leave-active { 
     } 
    } 
}

Потому что я установил Z-индекс к -1, он появится под ввести кадр. Фактически .slide-animate Я установил абсолютное значение и заполнил экран просто потому, что угловой, похоже, создает второй вид при загрузке в новом контенте и удаляет старый после того, как он будет завершен. Таким образом, установка позиции на абсолютная разрешала содержание сидеть друг над другом.

источник

2015-01-26 16:33:34 r3plica

AngularJS ngAnimate и animate.css

ответ

Смежные вопросы