Пытаясь понять AngularJs анимационных переходов с ключевыми кадрами

Question

Я новичок в Угловом и не имеет много опыта работы с CSS3 (я бэкендом Dev!)

Я пытаюсь понять, как угловое управление обычаем переходы с ключевыми кадрами css3.

Я получил это:

В моей разметке:

<div id="welcome-container" ng-hide="test"> 
... 
</div> 

в мой контроллер:

$scope.test = false; 
// ... doing some things that takes more than 3-4 seconds 
$scope.test = true; 

и в моем CSS:

#welcome-container.ng-hide { 
    animation:1s mycustomkeyframe; 
    -webkit-animation:1s mycustomkeyframe; 
} 

@keyframes mycustomkeyframe { 
    from { opacity: 1; } 
    to { opacity: 0; } 
} 

@-webkit-keyframes mycustomkeyframe { 
    from { opacity: 1; } 
    to { opacity: 0; } 
} 

Я получил этот пример работает с ng-hide-add и ng- спрятанные классы, но я действительно потерялся с ключевыми кадрами. Мой код скрывает div, но он не делает никакой анимации! Я хочу использовать ключевые кадры для выполнения jquery-подобных переходов для облегчения подъема (без jquery: P)

Кто-нибудь может мне помочь?

Answer 1

Никогда не применяйте угловые перед, но с точки зрения CSS у вас нет класса ng-hide на вашем div.

<div id="welcome-container" class="ng-hide" ng-hide="test"> 
Here is a bunch of text blah 
</div> 

JsFiddle

Answer 2

AngularJS и CSS3 2 совершенно разные вещи

Угловая можно прикрепить класс CSS к контейнеру

и после этого .. на основе этого нового CSS класс . вы можете вызвать запуск анимации из CSS

$scope.my_css_clas = 'demo_classs' 

<div ng-class="{{ my_css_clas }}"> 

классов в угловом прикрепляются с ng-class

Answer 3

Я думаю, что это не представляется возможным анимировать с ключевыми кадрами директивы нг скрытия в текущей версии.

Вы должны использовать другой класс для анимации, а затем, когда анимация закончится, выполните действие hide или используйте другую ng-директиву, такую ​​как ng-leave.