Использование ng-animate с animate.css

Question

Я пытаюсь понять и использовать ngAnimate.

Я использую angular-animate.js, animate.css и угловой 1.3.

Прямо сейчас, я добавить в мое приложение конф ngAnimate, чтобы активировать его, и я добавить к моему CSS-то вроде этого:

.ng-leave{ 
    -webkit-animation-name: fadeInUp; 
    -moz-animation-name: fadeInUp; 
    -o-animation-name: fadeInUp; 
    animation-name: fadeInUp; 
} 

Это работает потому, fadeInUp это объявить в animate.css.

Итак, теперь я хотел бы сделать то же самое без написания CSS (по Juste с использованием animate.css)

Я пытался что-то подобное, но это не работает

<li class="list cars" ng-repeat="item in cars track by item.id" ng-animate="{enter: 'fadeInUp animated', leave: 'fadeOutUp animated'}"> 

Любой идея?

Благодаря

Answer 1

шаги: -

1) Обеспечение зависимостей: -

angular.module('yo', [ 
     'ngAnimate' 
    ]); 

с "угловатыми-animate.min.js" добавлен в ваш тег сценария.

2) Существует три способа выполнения анимации: - a) Переходы CSS. b) Анимация с ключевыми кадрами CSS c) Анимация по JavaScript.

3) Выберите любой из вышеперечисленных, как: - Например, если ваш шаблон

<div ng-init="on=true"> 
    <button ng-click="on=!on">Toggle On/Off</button> 
    <div class="my-special-animation" ng-if="on"> 
    This content will enter and leave 
    </div> 
</div> 

Анимация на CSS Переход обязательный атрибут класса в вашем элементе и просто добавьте следующий CSS: -

.my-special-animation.ng-enter { 
    -webkit-transition:0.5s linear all; 
    transition:0.5s linear all; 

    background:red; 
} 

/* destination animations */ 
.my-special-animation.ng-enter.ng-enter-active { 
    background:blue; 
} 

plunker: - http://plnkr.co/edit/?p=preview

CS S Keyframe анимации более обширны, чем переходы, и они поддерживаются одними и теми же браузерами (кроме IE9 и ниже). Стиль CSS именование похож, но нет никакой необходимости использовать -Active класс, так как ключевой кадр анимации полностью управляется в КАС @keyframes декларации блока

.my-special-animation.ng-enter { 
    -webkit-animation:0.5s red-to-blue; 
    animation:0.5s red-to-blue; 
} 

@keyframes red-to-blue { 
    from { background:red; } 
    to { background:blue; } 
} 

@-webkit-keyframes red-to-blue { 
    from { background:red; } 
    to { background:blue; } 
} 

Plunker: - http://plnkr.co/edit/?p=preview

JavaScript Animations If вы хотите выполнить анимацию с большим контролем, тогда вы всегда можете использовать анимацию JavaScript. Это работает, определив заводскую как функцию внутри вашего кода модуля следующим образом:

myApp.animation('.my-special-animation', function() { 
    return { 
    enter : function(element, done) { 
     jQuery(element).css({ 
     color:'#FF0000' 
     }); 

     //node the done method here as the 2nd param 
     jQuery(element).animate({ 
     color:'#0000FF' 
     }, done); 

     return function(cancelled) { 
     /* this (optional) function is called when the animation is complete 
      or when the animation has been cancelled (which is when 
      another animation is started on the same element while the 
      current animation is still in progress). */ 
     if(cancelled) { 
      jQuery(element).stop(); 
     } 
     } 
    }, 

    leave : function(element, done) { done(); }, 
    move : function(element, done) { done(); }, 

    beforeAddClass : function(element, className, done) { done(); }, 
    addClass : function(element, className, done) { done(); }, 

    beforeRemoveClass : function(element, className, done) { done(); }, 
    removeClass : function(element, className, done) { done(); }, 

    allowCancel : function(element, event, className) {} 
    }; 
}); 

Plunker: - http://plnkr.co/edit/?p=preview