ngAnimate не анимирует переходы

Question

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

var searchApp = angular.module('searchApp', ['ngAnimate']) 

http://plnkr.co/edit/ZJIF6BGs0ORr3S6YnJwG?p=preview

Любой человек может увидеть, что я делаю неправильно? Это, должно быть, очень очевидная вещь, потому что приложение теперь так просто ... потратил часы, пытаясь это увидеть.

Answer 1

Проблема с вашим CSS не с Угловым.

Here's a working version

Проблема в том, что один .testiDiv .ng-hide не действует в этой ситуации, это означает, что вы ожидаете .ng-hide быть в.testiDiv, а не на него.

Проблема состоит в том, что анимация была на неправильном классе, она должна быть связана с классами анимации. Угловая автоматически применяется к элементам с использованием ng-show/ng-hide.

.testiDiv { 
    background-color: black; 
    width: 100px; 
    height: 100px; 
    opacity: 1; 
} 

.testiDiv.ng-hide { 
    opacity: 0; 
} 

.testiDiv.ng-hide-add, .testiDiv.ng-hide-remove { 
    -webkit-transition:all 1s linear; 
    -moz-transition:all 1s linear; 
    -o-transition:all 1s linear; 
    transition:all 1s linear; 
}